Skip to main content
Skip table of contents

Theme and Style

System Theme

When rendering ModuleScreen, system theme object information is passed to ModuleScreen through props.

CODE
// index.tsx

import { ThemeProvider } from "@mui/material/styles";
...
class MainScreen extends ModuleScreen {
    ...
    render(){
        return(
            <ThemeProvider theme={this.systemTheme}>
                ....
            </ThemeProvider>
        )
    }
}

User Style

To avoid duplication of style names between system and apps, Dart-IDE Projects force CSS Modules through Webpack settings at build time. Therefore, you must use the style in the CSS Module method as below.

2.1 Create assets/styles/{style-file-name}.(s)css file and define styles

CODE
// assets/styles/styles.scss

.container_servo-switch {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

2.2 Use user styles in index.tsx

CODE
// index.tsx 

import { ThemeProvider } from "@mui/material/styles";
import styles from "./assets/styles/styles.scss";
...
class MainScreen extends ModuleScreen {
    ...
    render(){
        return(
            <ThemeProvider theme={this.systemTheme}>
                <section className={styles["container_servo-switch"]}> // CSS Module 방식 사용 필수
                <section className="container_servo-switch"> // 일반 스타일 적용 방식 사용 불가
                      ...
                </section>
            </ThemeProvider>
        )
    }
}

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.