MUISelect style overwrite in global theme - reactjs

Question

I want to overwrite a specific style for multiple components. For now it works for all components, but not the the Select.
What I'm doing is:
MuiSelect: {
styleOverrides: {
select: {
background: themePalette.palette.background.paper,
marginLeft: '0rem',
borderRadius: '10rem',
},
iconOutlined: {
background: themePalette.palette.background.default,
color: themePalette.palette.primary.main,
borderRadius: '10rem',
},
},
variants: [
{
props: { size: 'small' },
style: {
borderRadius: '0.4rem',
select: {
borderRadius: '0.4rem',
},
iconOutlined: {
borderRadius: '0.4rem',
},
},
},
],
},
The style in the "styleOverrides" section get overwritten like expected. But the variant never is applied.
For other elements like TextField, ToggleButtonGroups, etc. it works. But somehow it does not work for the Select.
Also when I directly overwrite the same properties in the Select control via the sx prop, it's not applied.
sx={{
input: {
borderRadius: '0.4rem',
},
select: {
borderRadius: '0.4rem',
backgroundColor: theme.palette.grey[300],
},
borderRadius: '0.4rem !important',
}}
Here I also don't have any effect. The border radius is still unchanged at '10rem' like it's defined in the stylesOverrides.
Is this a bug, or am I doing something wrong for the Select?

Answer 1

style in theme props and sx work with css selectors. Not with pre-defined slots like styleOverrides
sx={{
'& .MuiSelect-select': {
...styles here,
...
}
}}