SCSS Style Guide

There are three ways to apply Style to the UI Component.

1. Changing the value in the Property screen

2. Applying line style or sx prop(mui style)

line style

To style an element with the inline style attribute, the value must be a JavaScript object.
CODE
```
<Box style={{ width: 100, height: 100 }}>
</Box>
```

sx prop

sx prop is a function that can provide css from MUI to React fast and easily
For more detail: https://mui.com/system/getting-started/overview/#the-sx-prop
CODE
```
<Box sx={{ width: 100, height: 100}}>
  <Component1 />
  <Component2 />
</Box>
```

3. Applying SCSS Style

For more detail:https://react.dev/learn#adding-styles

The example for applying SCSS style is as follows.

Info.

When dragging and dropping the UI Component from the Component Palette, import styles from "./assets/styles/styles.scss" code is automatically added above.

Step 1. Add CSS class in your styles.scss file.
Step 2. Import style files as modules in your tsx file(e.g. index.tsx).
Step 3. In JSX code, add the className property to apply SCSS classes in your div tag.

assets/styles/styles.scss

CODE

.main-header {
  width: 100%;
  height: 100%;
}

.container-sample {
  padding: 20px;
  background-color: aqua;
}

index.tsx

CODE

import styles from "./assets/styles/styles.scss";

...

render() {
  return (
      <ThemeProvider theme={this.systemTheme}>
          <div className={styles["container-sample"]}>
          </div>
      </ThemeProvider>
  );
}

Note. General SCSS Coding Guideline

Developers should be cautious when changing styles for tags such a html, body, and img in their SCSS files.
This can critically impact the overall system’s styling, so it is recommended to apply styles using class selectors.
We will be updating the CSS style development guide soon. Additionally, we are currently developing a method to block such issues right before the build.