Already very popular, and growing quickly, this trend worries me and makes me want to quit software development - not because I can’t do it, but because I no longer respect my colleagues.
Of course there are benefits, as with anything. But I don’t see how the cons outweigh the pros.
1. Pollutes the props namespace
Sure, it’s not as bad as polluting the global namespace, but it’s completely unnecessary. Can we please just clean up after ourselves and not pollute at all?
Shoving all kinds of variables into React props is messy. It’s hard to tell at a glance where my data or logic props compared to my CSS style attributes.
2. SX prop to the rescue? Almost
If you like writing CSS in JS object notation, fine. At least it makes it easier to use JavaScript variables. But don’t tell me it’s a complete or even superset of CSS. It’s close, but not quite.
Specificity. Nobody likes it. But that doesn’t mean you can ignore it. It’s actually a very important and genius mechanism that allowed CSS to style millions of websites, each with many nested pages, visual dependencies, and a cascade of customizations - from reset, to default, to system-wide branding, to local component styles, to subtle overrides, to tweaking for dozens of devices.
SX doesn’t get it 100% right. It’s close, but styling web UI for multiple devices is already difficult. Limitations and hacky workarounds make it unbearable.
<Box sx={{ '> div': { '@media (min-width: 375px)': { a: { padding: '10px 20px', }, minWidth: '167px', }, 'a': { display: 'inline-block', padding: '7px 15px', }, 'border': '1px solid #E3E9EA',
First of all it’s messy with all the quotes, even though this is a super simple example.
But more importantly, the “padding” on the “a” tag - the
@media query should override the normal padding. But using JavaScript, they had to recreate base CSS functionality, and didn’t put it back together quite right.