IT二刀流にはプロモーションが含まれています。

Material-UiのDrawerで背景色を指定する

reactアイキャッチ

Material-UiのDrawerで飛び出てくるメニューの背景色を変更する方法です。

簡単かと思ったけど、意外とハマりました。

SwipeableDrawerでも同じ方法で変更できます。

サンプルコード

まずはmakeStylesをimportして、stylesを作成します。

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

const styles = {
  paper: {
    backgroundColor: 'red !important',  // !importantが重要
  }
}
const useStyles = makeStyles(styles);

次に作成したスタイルをDrawer(SwipeableDrawer)に渡します。

const classes = useStyles();
return(
  <SwipeableDrawer
    anchor={'left'}
    open={menuState['left']}
    onClose={toggleDrawer('left', false)}
    classes={{ paper: classes.paper }}  // styleを渡す
  >{getMenu('left')}</SwipeableDrawer>
)

注意点

background-colorを定義するときに「!important」をつけないと、どこかしらの何かしらのstyleに上書きされて反映されません。

const styles = {
  paper: {
    backgroundColor: 'red !important',  // !importantが重要
  }
}

ITエンジニアの転職

いまITエンジニアの需要は急拡大しています。
ITエンジニアの経験があれば好条件で転職することも難しくありません。

キャリスタカレッジ

☆ 支援ご協力のお願い ☆

この記事が「役に立った」と感じたら

投げ銭の「OFUSEで応援」で支援して頂けたら励みになります!

OFUSEのやり方(説明)

関連記事
記事特集