[docs] Remove style duplication

[oliviertassinari]

I think that we should be careful with the sx prop. It seems that we can easily overuse it. In #27956 I saw similar patterns where we were using styled(), then overriding the same property in sx.

[mui-pr-bot]

No bundle size changes (experimental)

Generated by 🚫 dangerJS against d02f193

[eps1lon]

I think that we should be careful with the sx prop. It seems that we can easily overuse it.

While & .someClass has the downside of affecting everything in the component tree. This is one of the problems CSS-In-JS solved by narrowing the scope of the styles. You're now expanding the scope again.

[oliviertassinari]

@eps1lon I guess it's a tradeoff.

I think that the advantage of the current approach is that we have a big chunk of the advantage of the scoped CSS. We scope at the file component level, not at the project level while also retaining the simplicity in how the override is written. We don't create yet another component. I think that it's more or less the tradeoff CSS modules have and that de had with the makeStyles API. I personally also like that the default behavior. If we are not aware of this CSS override, the default is for it to apply to all the svg icons. There is no need to remember to use the right sx value or class names or component name. It's close to how a ThemeProvider or a CSS variables would behave.