[system] Add support for variants in the styled() util
#39073
Conversation
mnajdova
added
new feature
Netlify deploy previewhttps://deploy-preview-39073--material-ui.netlify.app/ @material-ui/core: parsed: +0.11% , gzip: +0.13% Bundle size reportDetails of bundle changes (Toolpad) |
mnajdova
force-pushed
the
system/variants-api-styled
branch
from
92fb0e2 to
f4927a4
Compare
| @@ -28,43 +33,53 @@ const getStyleOverrides = (name, theme) => { | |||
| return null; | |||
| }; | |||
|
|
|||
| const transformVariants = (variants) => { | |||
There was a problem hiding this comment.
extracted so that it can be re-used in multiple places
| }; | ||
|
|
||
| const variantsResolver = (props, styles, theme, name) => { | ||
| const variantsResolver = (props, styles, variants) => { |
There was a problem hiding this comment.
Simplified signature to be re-used in both theme & styled's variants
| } | ||
| }); | ||
| } | ||
|
|
||
| return variantsStyles; | ||
| }; | ||
|
|
||
| const themeVariantsResolver = (props, styles, theme, name) => { |
There was a problem hiding this comment.
This is the legacy variantsResolver
| ...props, | ||
| theme: resolveTheme({ ...props, defaultTheme, themeId }), | ||
| }); | ||
| if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg) { |
There was a problem hiding this comment.
Adding the variants styled in case arrays are used for defining multiple styles.
| @@ -217,21 +330,7 @@ export default function createStyled(input = {}) { | |||
| // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles. | |||
| transformedStyleArg = [...styleArg, ...placeholders]; | |||
| transformedStyleArg.raw = [...styleArg.raw, ...placeholders]; | |||
| } else if ( | |||
There was a problem hiding this comment.
This was moved above, so that we can do a transformation only once.
This PR adds an API that is available in the zero-runtime CSS in JS. The goal for backporting this API is to allow a smoother migration when both APIs need to be used alongside each other.
The new API is related to supporting the
variantsAPI that we have in the theme to thestyled()utility too:I am reluctant to document this API just yet, maybe we can just try to use it internally first and them announce it together with the zero-runtime CSS in JS first alpha release.