material-uiのスタイルとかをいじりたいときのメモ
Material-UIをつかって、 https://mrtry.github.io/ の見た目をいい感じにしていた
その際、スタイリングをちょっといじったのだけど、いじり方を忘備録的にメモ
実際にいじったコードは以下にある
基本
MuiThemeProvider
というコンポーネントにtheme
を渡すと、
その子コンポーネントにはtheme
で設定したスタイリングが適用される
const theme = createMuiTheme() const Root = () => ( <MuiThemeProvider theme={theme}> <App /> </MuiThemeProvider> )
タイポをいじりたい
typography
オブジェクトを渡すと良い
デフォルト設定の以下を参考に、気になるプロパティがあったら上書きすると良い
いじりたくなりそうな例で行くと、フォントの変更がありそう
私の場合、Noto Sans
を使うためにこんな感じで書いた
const theme = createMuiTheme({ typography: { fontFamily: [ 'Noto Sans', 'sans-serif', ].join(','), }, }) const Root = () => ( <MuiThemeProvider theme={theme}> <App /> </MuiThemeProvider> )
これと別に、index.html
にてフォントを入れておくことを忘れてはいけない
<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
スタイルを上書きしたい
overrides
オブジェクトを渡すと良い
overrides
以下に、対応するスタイルシート名のオブジェクトをつくり、
それ以下にCSS in JSでスタイルを書いていけば、スタイルを上書きできる
スタイルシート名は、MuiXxxx
で統一されているっぽいけど、
心配ならいじりたいコンポーネントのComponent API
を見ると下の方に書いてある
例えば、Typography
のComponent API
をみると以下のように書いてある
If using the overrides key of the theme as documented here, you need to use the following style sheet name: MuiTypography. Typography - Material-UI
各見出しの上下にmarginいれたり、色をいじりたかったので、こんなのを書いてた
const theme = createMuiTheme({ overrides: { MuiTypography: { headline: { color: 'teal', marginTop: '16px', marginBottom: '16px', }, title: { marginTop: '16px', marginBottom: '16px', }, }, }, }) const Root = () => ( <MuiThemeProvider theme={theme}> <App /> </MuiThemeProvider> )