Блог

Я пытаюсь увеличить ширину выпадающего списка. Глядя на его класс в inspect, он указан как:

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

В моем компоненте я пытаюсь ссылаться на него с помощью useStyles:

 const useStyles = makeStyles(theme => ({
    root: {
      'amp; 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: {
          'amp;.MuiMenu-paper': {
            'amp;.MuiPopover-paper': {
              'amp;.MuiPaper-elevation8': {
                'amp;.MuiPaper-rounded': {
                  width: '375px !important',
                },
              },
            },
          },
        },
      },
    },
  })

....

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