Open2021/06/08にコメント追加2

【Material-UI】Material-UI DialogTitleの背景色変更

Material-UI

yu.miyoshi 2021/06/03

yu.miyoshi 2021/06/08

概要

Material-UIでDialogTitleコンポーネント使用時、背景色を変更したい

対応内容

Material-UI(React)でDialogTitleの背景色を変更しようとしたが、classNameでbackgroud-colorを変更できない。
以下変更方法について記述する。

DialogTitleの大元のclass(root)に記述をすることで対応可

Dialog.tsx

const styles = (theme: Theme) =>
  createStyles({
    root: {
      margin: 0,
      padding: theme.spacing(2),
      backgroundColor: '#F9F9F9',
      '& h6': {
        fontWeight: 'bold',
        color: '#000000'
      }
    },
  })

...

...

const DialogTitle = withStyles(styles)((props: DialogTitleProps) => {

  return (
    <MuiDialogTitle className={classes.root} {...other}>
      <Typography variant="h6">{children}</Typography>
      <IconButton aria-label="close" className={classes.closeButton}>
        <CloseIcon />
      </IconButton>
    </MuiDialogTitle>
  )
})

色を変更できた

概要

対応内容

参考サイト