Hello! Using the React MUI wrapper, how can I over...

# javascript

[Hakon Grotte]

Hello! Using the React MUI wrapper, how can I override style of nested components with the sx prop?

[Hakon Grotte]

From https://mui.com/material-ui/customization/how-to-customize/#the-sx-prop Overriding nested component styles section:

<Slider
  defaultValue={30}
  sx={{
    width: 300,
    color: 'success.main',
    '& .MuiSlider-thumb': { <-- Like this
      borderRadius: '1px',
    },
  }}
/>

[turansky]

Button {
   sx {
      // your styles
   }
}

[Hakon Grotte]

Yes that part is clear, and standard props like width and color in the example above are straightforward. However, it is the

'& .MuiSlider-thumb': {
      borderRadius: '1px',
    },

styling prop I am struggling with. Effectively it would be a “free-text” styling prop without type-safety to target specific css class names

[turansky]

Standard classnames already generated

sx {
    and(MuiSlider.thumb) {
       // ... your props
    }
}

[Hakon Grotte]

Exactly what I was looking for, thanks 🙂