材料UIコンポーネントをカスタマイズする2つの方法.

導入

材料UIは、ウェブサイトやウェブアプリのフロントエンドを設計するためのゴーグルのライブラリです.バニラCSSを使うことをお勧めします.しかし、材料UIのカスタマイズに新しい人はトリッキーな部分にすることができます.
つの方法で材料のUIをカスタマイズできます.

グローバルクラス

カスタムクラス

世界クラス

プロジェクトからグローバルに使用されるクラスは、プライマリ、セカンダリ、トランジションなどのグローバルクラスと呼ばれます.
既定のテーマでは、オブジェクトのUIグローバルクラスをオブジェクトとして見つけることができます.

グローバルクラスのカスタマイズ方法

カスタムオブジェクトを作成し、<ThemeProvider theme={variable}></ThemeProvider>コンポーネントでラップしてグローバルクラスをカスタマイズできます.オブジェクト名がMUIデフォルトテーマオブジェクトと同じであるべきであることに注意してください.
例

const theme = createMuiTheme({
palette: {
primary: pink,
secondary: green
},

shape: {
borderRadius: 8,
},

});

export default function App()
{
<ThemeProvider theme={theme}>
<component1/>
<component2/>
.
.
.
<componentN/>
</ThemeProvider>

上記のユーザー定義のテーマオブジェクトは、材料UIのテーマをオーバーライドします.

コンポーネントのカスタムスタイリング

我々は、材料UIの定義済みオブジェクトを使用せずにスタイリングのためのカスタムオブジェクトを作ることができます.私たちはそのためのメイクスタイルフックを使用することができます.
基本的にMakeStyle Hoopのテーマプロップに値を提供することによって、我々はコンポーネントをスタイルします.
あなたはスタイリングのためのあなた自身の名前などを使用することができます.それから、すべてがthemeProviderコンポーネントでうまく包まれます.

例

const useStyle = makeStyles(theme =>({
root :{
height: --;
width: --;
background: ==
},

slider: {
...},

header: {
...}

//The above is custom template

export default function App()
{
const classes = useStyle(); //put function in classes variable to access the objects.

return(
<ThemeProvider theme={theme}>
<div className={classes.root}>
<div className={classes.header}/>
<div className={classes.slider}/>
</div>
)}