[CardOverflow][joy-ui] Remove conditional CSS to support Next.js App dir #39101
Conversation
| margin: 'var(--_CardOverflow-margin)', | ||
| borderRadius: 'var(--_CardOverflow-radius)', | ||
| padding: 'var(--_CardOverflow-padding)', |
There was a problem hiding this comment.
Without using internal CSS variables, the developer will need to override these properties with a selector to beat the [.${cardClasses.horizontal} > &] and [data-first-child][data-last-child].
siriwatknp
added
bug 🐛
Netlify deploy previewhttps://deploy-preview-39101--material-ui.netlify.app/ Bundle size reportDetails of bundle changes (Toolpad) |
|
I believe issue arises from |
Ideally, we should not have used |
| margin: 'var(--_CardOverflow-margin)', | ||
| borderRadius: 'var(--_CardOverflow-radius)', | ||
| padding: 'var(--_CardOverflow-padding)', | ||
| [`.${cardClasses.horizontal} > &`]: { |
There was a problem hiding this comment.
When is this class being set? Isn't this a parent classname?
There was a problem hiding this comment.
Do we expect people to set it themselves?
There was a problem hiding this comment.
When is this class being set?
It is set by the Card component. The CardOverflow should be used as a direct child of the Card.
Do we expect people to set it themselves?
Nope, they don't need to.
There was a problem hiding this comment.
Aaah, we are basically using a parent selector to style the current component, nicee :D I never thought of using this, or more I didn't even know it is possible :)
|
@mnajdova in case you missed this one. |
There was a problem hiding this comment.
I could verify that it works as expected here https://codesandbox.io/p/github/jamesxv7/joy-ui-nextjs-ts/csb-3jkvzn/draft/gallant-platform?file=%2Fpackage-lock.json%3A12%2C36. I would recommend next time to link a sandbox with the test-case & the fix so that we don't have to manually do it.
closes #38791
Replace conditional CSS with CSS variables to keep CSS specificity to (0,1,0).