Ban sx atrribute in all pigment components and skip compilation

[povilass]

Summary

Migrating from v4 -> v5 has been a rollercoaster migrating makestyles to styled that introduced SX property and made life easier.

Migrating from v5 -> v6 is still unclear how to workaround some cases of the dynamic context of styling and introduced unwanted experiences for developers (for middle, junior level developers mostly) on how to work with SX property. Most cases can be solved using component + styled + classes combination over SX which is better and clearer how to do it.

Examples

No response

Motivation

It would be nice to disable this feature if possible and choose a proper styling method for consistency throughout the application. I do not think, that SX is the future of styling and probably it will shift in v7 or v8 material release again.

Note: disabled, only for pigment components, not emotion for easy migration.

Search keywords: sx, not the future

[siriwatknp]

some cases of the dynamic context of styling and introduced unwanted experiences for developers (for middle, junior level developers mostly) on how to work with SX property

Can you give some example of these cases. We could put it on the docs to benefit other people too.

[brijeshb42]

You can do it even now without any changes in the library.

In Pigment's config, pass transformSx: false and also don't augment TS to support the sx attribute.
This'll also save some time on the sx transform that we have to do.

[povilass]

@siriwatknp The reason is that junior and middle developers do not read docs. They usually work with the try-fail method.

For example, in the map function,n you will get an error for no reason on SX because of compile time

<div>
  {[0, 1, 2, 3].map((item) => 
    <Fragment key={item}>
      <Stack spacing={2} sx={{color: 'red'}}>
        <Item>Item 1</Item>
        <Item>Item 2</Item>
        <Item>Item 3</Item>
      </Stack>
    </Fragment>)
   }
</div>

But if you use styled it gives the same effect and almost generates the same styles in the CSS files without any penalty than using it.

const Root = styled('div')({
  '& .element': {color: 'red'}
})

<Root>
  {[0, 1, 2, 3].map((item) => 
    <Fragment key={item}>
      <Stack spacing={2} className="element">
        <Item>Item 1</Item>
        <Item>Item 2</Item>
        <Item>Item 3</Item>
      </Stack>
    </Fragment>)
   }
</Root>

@brijeshb42 yes you can but the is a problem with another task with typography in v7 color property will be eliminated and we can only apply color through sx.

Will not be supported <Typography color="text.primary" />
Will supported only with sx property <Typography sx={{ color : "text.primary"}} />

But this is for another discussion.

[siriwatknp]

But this is for another discussion.

Then please open another issue since you can disable sx transformation from the config as @brijeshb42 pointed out.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@povilass How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.