Overriding Material UI class?

Question

I'm trying to increase the width of an drop down. Looking at the class of it in inspect its listed as:

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

In my component i'm trying to reference it by useStyles:

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

And then attaching it to my component -

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

I'm missing something, any one got an idea where my disconnect is happening at?

Answer 1

Ended up solving the question. I used createMuiTheme and nested the classes to increase the width. I then passed in the theme using ThemeProvider and wrapped the component with it.

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

....

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