Skip to content

[system] Remove css utility in favor of sx#23454

Merged
mnajdova merged 3 commits intomui:nextfrom
mnajdova:feat/remove-css-prop-system
Nov 10, 2020
Merged

[system] Remove css utility in favor of sx#23454
mnajdova merged 3 commits intomui:nextfrom
mnajdova:feat/remove-css-prop-system

Conversation

@mnajdova
Copy link
Member

@mnajdova mnajdova commented Nov 9, 2020

Breaking changes

  • Replace css prop with sx to avoid collision with styled-components & emotion CSS props.
-<Box css={{ color: 'primary.main' }} />
+<Box sx={{ color: 'primary.main' }} />

This PR removes the system's css utility in favor of sx. Both styled-components as well as emotion export their own css prop, which is conflicting with the system one. As we already have the sx prop we can safely remove the css one in favor of sx.

Closes #18962

@mnajdova mnajdova added breaking change Introduces changes that are not backward compatible. scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI component: Box The React component. labels Nov 9, 2020
@mui-pr-bot
Copy link

mui-pr-bot commented Nov 9, 2020

@material-ui/system: parsed: -2.96% 😍, gzip: -2.18% 😍

Details of bundle changes

Generated by 🚫 dangerJS against 627f9ba

@oliviertassinari oliviertassinari added this to the v5 milestone Nov 9, 2020
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have added the v5 milestone so the script of @eps1lon can work: #22074.

@mnajdova
Copy link
Member Author

I have added the v5 milestone so the script of @eps1lon can work: #22074.

@oliviertassinari for the deprecation should we just rename the prop and support both css (with deprecation) and sx in v4? Than in v5 it will be extended, but that should not break anything else.

@oliviertassinari
Copy link
Member

@mnajdova For the deprecation, this plan sounds good.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

breaking change Introduces changes that are not backward compatible. component: Box The React component. scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[system] Prefer styled-components's css prop over Box css

3 participants