SCSS Style Guide

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

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.

1. Applying SCSS Style RECOMMENDED

• 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, code is automatically added above.

• Step 1. Add CSS class in your styles.scss file.

  CODE

  .main-header {
    width: 100%;
    height: 100%;
  }
  
  .container-sample {
    padding: 20px;
    background-color: aqua;
  }

• Step 2. Import style files as modules in your tsx file like below.
  import styles from "./assets/styles/styles.scss"
  

• Step 3. In JSX code, add the className property to apply SCSS classes in your element like div.

  CODE

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

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>