Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MUI material Grid2's default styles take precedence over pigment css #363

Closed
Prabh-Kang opened this issue Jan 8, 2025 · 3 comments
Closed

MUI material Grid2's default styles take precedence over pigment css #363

Prabh-Kang opened this issue Jan 8, 2025 · 3 comments
Assignees
@brijeshb42
Labels
support: question Community support but can be turned into an improvement

Comments

@Prabh-Kang
Copy link

Prabh-Kang commented Jan 8, 2025 •
edited by github-actions bot
Loading

Steps to reproduce

You can find the related code here

Current behavior

  • For Grid2, lets take an example of one of its props direction, if flexDirection is passed via pigment css or even sx prop, Grid2's default flex direction takes precedence.
Screenshot 2025-01-08 at 1 33 57 PM
Screenshot 2025-01-08 at 1 32 43 PM

Moreover, grid styles appear to go inside <style> in <head> with data-emotion. (Already added transformLibraries: ["@mui/material"]). This is causing it to take precedence over pigment css as pigment css is being applied via layers.
However, for Typography component, its root styles do not go inside <style> in <head> and everything works as expected.

Is this going to change? Or is there any workaround?

Expected behavior

such styles should go in pigment css file like other styles. It should reside in style tag taking over pigment css precedence. or there should be a way to configure this behaviour

Context

No response

Your environment

npx @mui/envinfo

This is from codesandbox env
Behaviour is same on local with same project

  System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    npm: 9.8.1 - /usr/local/bin/npm
    pnpm: 8.10.2 - /usr/local/share/npm-global/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react:  11.14.0 
    @emotion/styled:  11.14.0 
    @mui/core-downloads-tracker:  6.3.1 
    @mui/material: ^6.3.1 => 6.3.1 
    @mui/private-theming:  6.3.1 
    @mui/styled-engine:  6.3.1 
    @mui/system:  6.3.1 
    @mui/types:  7.2.21 
    @mui/utils:  6.3.1 
    @pigment-css/nextjs-plugin: ^0.0.29 => 0.0.29 
    @pigment-css/react: ^0.0.29 => 0.0.29 
    @pigment-css/unplugin:  0.0.29 
    @types/react: ^18 => 18.2.48 
    react: ^18 => 18.2.0 
    react-dom: ^18 => 18.2.0 
    typescript: ^5 => 5.3.3```

</details>


**Search keywords**: pigment css specificity
@Prabh-Kang Prabh-Kang added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 8, 2025
@brijeshb42
Copy link
Contributor

To use Grid with Pigment CSS, you'll have to import the Grid from @mui/material-pigment-css/Grid. What you've imported works through emotion. This'll work if emotion's style tag come before the link tags injected by Pigment CSS.

@brijeshb42 brijeshb42 self-assigned this Jan 8, 2025
@brijeshb42 brijeshb42 added support: question Community support but can be turned into an improvement status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 8, 2025
@Prabh-Kang
Copy link
Author

works. Thanks! Closing the issue

@github-actions github-actions bot removed the status: waiting for author Issue with insufficient information label Jan 8, 2025
@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 8, 2025

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Prabh-Kang How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

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

@brijeshb42 brijeshb42

Labels
support: question Community support but can be turned into an improvement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@brijeshb42 @Prabh-Kang