覆盖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>

我丢失了一些东西，有人知道我断开连接的位置吗？

解决方法

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

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

....

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