Code Monkey home page Code Monkey logo

Comments (5)

undesicimo avatar undesicimo commented on April 27, 2024

There is another instance that overwritten styles by using styled is preceded by default values.
This happens on compile time, which is maybe different from a dynamic component like popper
Screenshot 2023-12-18 at 18 11 00

our `babel.rc` settings 
{
  "presets": ["react-app"],
  "plugins": [
    [
      "babel-plugin-import",
      {
        "libraryName": "@material-ui/core",
        "libraryDirectory": "esm",
        "camel2DashComponentName": false
      },
      "core"
    ],
    [
      "babel-plugin-import",
      {
        "libraryName": "@material-ui/icons",
        "libraryDirectory": "esm",
        "camel2DashComponentName": false
      },
      "icons"
    ],
    "babel-plugin-styled-components",
    "babel-plugin-tsconfig-paths-module-resolver",
    [
      "@emotion",
      {
        "importMap": {
          "@mui/system": {
            "styled": {
              "canonicalImport": ["@emotion/styled", "default"],
              "styledBaseImport": ["@mui/system", "styled"]
            }
          },
          "@mui/material/styles": {
            "styled": {
              "canonicalImport": ["@emotion/styled", "default"],
              "styledBaseImport": ["@mui/material/styles", "styled"]
            }
          }
        }
      }
    ]
  ],
  "compact": false
}

from material-ui.

undesicimo avatar undesicimo commented on April 27, 2024

Is there any way to explicitly not make jss styles not precede MUIv5 styling? Styles are overwritten by global class names..

from material-ui.

brijeshb42 avatar brijeshb42 commented on April 27, 2024

@mnajdova Do you have pointers for this? I see that the jss style tag gets added last, overriding the emotion styles.

from material-ui.

undesicimo avatar undesicimo commented on April 27, 2024

OK, i seem to have found a solution for this.
Still would like to hear about gotchas

Reproduction

LINK

wrapping my app with <StylesProvider injectFirst> imported from MUIv4 package seems to solve it. If this is not done already on ann App that needs migrating, it seems necessary to not inject jss after emotion styles.

import { StylesProvider } from "@material-ui/core/styles";

export default function App( ) {

return (
      <StylesProvider injectFirst>
           <Components/>
             <OtherComponents/>
       <StylesProvider/>
      )
}

referred from the old documents
https://v4.mui.com/guides/interoperability/#controlling-priority-5

This will be gone as soon MUIv4 packages are all replaced in our app

from material-ui.

undesicimo avatar undesicimo commented on April 27, 2024

I dont know if this is high occurrence, but might be a good note to add in the migration troubleshoot page ?
https://mui.com/material-ui/migration/troubleshooting/

from material-ui.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.