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>
)
}
}