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.

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

[StylesProvider v5.22] Not woking when import #24302

Closed
mtr1990 opened this issue Jan 7, 2021 · 5 comments
Closed

[StylesProvider v5.22] Not woking when import #24302

mtr1990 opened this issue Jan 7, 2021 · 5 comments
Labels
support: question Community support but can be turned into an improvement

Comments

@mtr1990
Copy link

mtr1990 commented Jan 7, 2021

Hello, This is my case:

Option 1: import { StylesProvider } from "@material-ui/core"; => Working (can override style)
https://prnt.sc/whxu7p

Option 2: import { StylesProvider } from "@material-ui/core/styles"; => Not working
https://prnt.sc/whxthg

https://codesandbox.io/s/containedbuttons-material-demo-forked-exdgd?file=/index.js:121-179

currently I cannot use option one Because i using:
https://next.material-ui.com/guides/minimizing-bundle-size/

I got an error when using option one,

Please help me, Thanks!

@mtr1990 mtr1990 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 7, 2021
@povilass
Copy link
Contributor

povilass commented Jan 7, 2021

@mtr1990
Copy link
Author

mtr1990 commented Jan 7, 2021

@povilass Thank for help but I'm using minimizing-bundle-size with babel-plugin-transform-imports

 "plugins": [
    [
      "transform-imports",
      {
        "@material-ui/core": {
          "transform": "@material-ui/core/${member}",
          "preventFullImport": true
        },
        "@material-ui/icons": {
          "transform": "@material-ui/icons/${member}",
          "preventFullImport": true
        },
        "lodash": {
          "transform": "lodash/${member}",
          "preventFullImport": true
        }
      }
    ]
  ]

My Theme:

import { StylesProvider as StylesEngineProvider } from '@material-ui/core';
import { StylesProvider } from '@material-ui/styles';

  <ThemeProvider theme={theme}>
      <StylesEngineProvider injectFirst>
        <StylesProvider>
          <CssBaseline />
          <GlobalStyles />
          {children}
        </StylesProvider>
      </StylesEngineProvider>
    </ThemeProvider>

get Error => Module not found: Can't resolve '@material-ui/core/StylesProvider' in '/Volumes/DATA/_Trinh's Github/__Minimal Material Kit Pro/Minimal Material Kit Pro Standard v1.0.0/src/theme'

@povilass
Copy link
Contributor

povilass commented Jan 7, 2021

import { StylesProvider as StylesEngineProvider } from '@material-ui/core'; comes from export { StylesProvider } from '@material-ui/styled-engine';

So you probably should include @material-ui/styled-engine in you plugin or use export { StylesProvider as StylesEngineProvider } from '@material-ui/styled-engine'; directly.

https://codesandbox.io/s/containedbuttons-material-demo-forked-5bdh6?file=/index.js

@mtr1990
Copy link
Author

mtr1990 commented Jan 7, 2021

Thanks povilass, It's work for me,

just only

import { StylesProvider } from '@material-ui/styled-engine';

  <ThemeProvider theme={theme}>
      <StylesProvider injectFirst>
        <CssBaseline />
        <GlobalStyles />
        {children}
      </StylesProvider>
    </ThemeProvider>

=> It's worked, so many thank :)

@mtr1990 mtr1990 closed this as completed Jan 7, 2021
@oliviertassinari oliviertassinari added support: question Community support but can be turned into an improvement and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 7, 2021
@oliviertassinari
Copy link
Member

We will likely change the current imports, following #24109 (comment).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
support: question Community support but can be turned into an improvement
Projects
None yet
Development

No branches or pull requests

3 participants