お気持ちの表明

思考を雑に外出していきます

material-uiのスタイルとかをいじりたいときのメモ

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

参考