MUI - correcting the position in select box dropdown

Question

I'm using MUI component in react js app.

I'm trying to adjust the position of dropdown menu in select component.

As the shown image, the dropdown menu is a bit moved to right. I want to move it back to the left end.

        <Select
            value={value}
            label={label}
            multiple={multiple}
            onChange={onChange}
            MenuProps={{
                PaperProps: {
                    sx: {
                        maxHeight: { md: 500, xs: 300 },
                        width: { xs: '100%', lg: 'unset' },
                        '&.MuiPaper-root': {
                            left: '-8px',
                        },
                    },
                },
            }}
        >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
            
        </Select>

I tried to move it to the left by writing '&MuiPaper-root': {left: '-8px'}, but it automatically overwrites my code as it is showned in console.

Answer 1

You just need to to add !important flag to prevent MUI from overwriting your styles:

 '&.MuiPaper-root': {
    left: '-8px !important',
  },