时间戳

首页 > 解决方案 > 覆盖 Material UI 类？

reactjs - 覆盖 Material UI 类？

问题描述

我正在尝试增加下拉菜单的宽度。在检查中查看它的类，其列为：

class="MuiPaper-root MuiMenu-paper MuiPopover-paper MuiPaper-elevation8 MuiPaper-rounded"

在我的组件中，我试图通过 useStyles 引用它：

const useStyles = makeStyles(theme => ({
    root: {
      '& MuiPaper-root MuiMenu-paper MuiPopover-paper MuiPaper-elevation8 MuiPaper-rounded': {
        width: '500px',
      },
    },
  }))

然后将它附加到我的组件 -

 <MaterialTable
        title=""
        columns={props.state.columns}
        data={props.state.data}
        components={{
          FilterRow: props => (
            <MTableFilterRow className={classes.root} {...props} />
          ),
        }}...
</MaterialTable>

我错过了一些东西，有人知道我的断开连接发生在哪里吗？

div 类

标签： reactjsmaterial-uimaterial-table

解决方案

终于解决了问题。我使用 createMuiTheme 并嵌套类以增加宽度。然后我使用 ThemeProvider 传入主题并用它包装组件。

  const theme = createMuiTheme({
    overrides: {
      MuiPaper: {
        root: {
          '&.MuiMenu-paper': {
            '&.MuiPopover-paper': {
              '&.MuiPaper-elevation8': {
                '&.MuiPaper-rounded': {
                  width: '375px !important',
                },
              },
            },
          },
        },
      },
    },
  })

....

<ThemeProvider theme={theme}> <Component/> </ThemeProvider>

推荐阅读