Search code examples
reactjsmaterial-ui

What does "sx" mean in MUI?


It's really bugging me. What does it mean?

I know that 'fx' is read "eff-axe" which just sound like "effects", so vfx means 'video effects' and sfx means 'sound effects'.

Thought other component frameworks have the same attribute but couldn't find an occurrence from Vuetify. Then I wondered if it's a Material Design spec thing, but still failed (from simple Googling).

If I can guess, they explain the 'sx' attribute as "The sx prop is a shortcut for defining custom styles that have access to the theme". So, it wanted to keep 's' from 'style', and just 'blur out' every charactgers in 'style' after 's', so just 'sx'?

Sorry for non-coding question but this is really bugging me please help.


Solution

  • Material ui borrowed the name from theme-ui (source):

    This PR adds the support for sx prop on the Box component. It is inspired by Theme UI's sx prop.

    Theme-ui picked it basically because it was short, sounded cool, and vaguely sounded like it referred to styles (source):

    The only other name I've come up with so far that feels right (which is also a little cryptic) is sx – some loose variant of the style & styled-system but terse enough to read well in code.

    I know this isn't a democracy, but I think sx is nice - terse, uncommon kinda sleek