Meterial-UI スタイル上書き・カスタマイズ

Material-UIで用意されたスタイルを上書きたいとき。

アプリ全体で、指定したMaterial-UIのクラスのスタイルを上書く

• Meterial-UI側で用意されてるThemeProviderと、createMuiTheme関数を使う
• クラス名はdevelopperToolsで確認
• 「MuiGridListTile-tile」Mui[component name]-[style rule name]-[UUID]

// index.jsx

import React from 'react';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

const theme = createMuiTheme({  // 戻り値はテーマオブジェクト
  overrides: {
    MuiGridListTile: {          // クラス名 「-」 の左辺側
      tile: {                   // クラス名 「-」 の左辺側
        overflow: 'visible'
      },
    },
  },
});

render(
  <ThemeProvider theme={theme}>
    <App />
  <ThemeProvider />,
  document.getElementById('root')
);

コンポーネント内で、指定したMaterial-UIのクラスのスタイルを上書く

• Meterial-UI側で用意されているmakeStyles関数を使う
• propsも渡せる

import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles(() => ({
    grid: {
      overflowY: 'visible'
    },
    content: {
      margin: '8px, auto',
      borderBottom: '.5px solid #efefef',
    }),
    title: (props) => ({
      borderLeft: '.2em solid' + props.color,
    }),
  }),
);

const Component = (props) => {
  const classes = useStyles(props);

  return (
    <>
      <div className={classes.title} />
      <div className={classes.grid} />
      <div className={classes.content} />
    </>
  );
);

export default Component;      

その他

• 他にもコンポーネントのタグに直接書くとかいろいろあるっぽい
• withStylesはコンポーネントを引数にとって、uuid指定したら一気にスタイル適用できる感じかも。使ったらまとめたい

参考

material-ui.com

material-ui.com