Skip to content

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

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

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

Conversation

@mnajdova

@mnajdova mnajdova commented Nov 9, 2020

Copy link
Copy Markdown
Member

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

mui-pr-bot commented Nov 9, 2020

Copy link
Copy Markdown

@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

@oliviertassinari oliviertassinari left a comment

Copy link
Copy Markdown
Member

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
Copy Markdown
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
Copy Markdown
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