[pigment-css] Add Box component #41451
Conversation
Netlify deploy previewhttps://deploy-preview-41451--material-ui.netlify.app/ Bundle size report |
github-actions
bot
added
the
PR: out-of-date
github-actions
bot
removed
the
PR: out-of-date
| const sxClass = typeof sx === 'string' ? sx : sx?.className; | ||
| const classes = [className, sxClass].filter(Boolean).join(' '); | ||
| // eslint-disable-next-line react/prop-types | ||
| const sxVars = sx && typeof sx !== 'string' ? sx?.vars : {}; |
There was a problem hiding this comment.
How about?
| const sxVars = sx && typeof sx !== 'string' ? sx?.vars : {}; | |
| // TODO remove, logic should be handled by the transpiler, needed anyway to support <div sx={{ | |
| const sxVars = sx && typeof sx !== 'string' ? sx?.vars : {}; |
There was a problem hiding this comment.
I don't think we'll be able to support <div sx={{}} /> in it's current form. It'll only be possible if there are no dynamic parts in the sx prop value, only then will we be able to replace it with className prop.
On the other hand, we could do something like <styled.div sx={{}} /> which could handle both static css as well as some dynamic values (limited by whatever is allowed in the sx prop).
There was a problem hiding this comment.
It'll only be possible if there are no dynamic parts in the sx prop value
Meaning depending on props? I guess this is rare enough 😄? Most of the time I use sx I use static values.
we could do something like <styled.div sx={{}} />
Like @gregberge's https://xstyled.dev/. I don't know if we need to go as far as introducing a new API.
There was a problem hiding this comment.
In that case, the compiler can be updated to throw an error if it encounters any dynamic value. Otherwise, it'll just replace sx prop with a className prop
oliviertassinari
changed the title
This is nothing but just a wrapper component with special handling for transformed sx prop.
| export type NoInfer<T> = [T][T extends any ? 0 : never]; | ||
| type FastOmit<T extends object, U extends string | number | symbol> = { | ||
| [K in keyof T as K extends U ? never : K]: T[K]; | ||
| }; | ||
|
|
||
| export type Substitute<A extends object, B extends object> = FastOmit<A, keyof B> & B; |
There was a problem hiding this comment.
Let's find time to comment on the purpose of these types later 😅. I can imagine how hard to make the PolymorphicComponent work.
There was a problem hiding this comment.
Yeah. Definitely. I hope this doesn't get more complex than this 🤣.
This is nothing but just a wrapper component with special handling for transformed sx prop.