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
theme.spacing is not a function with @material-ui/[styles/core] 4.0.1 #15976
Comments
@keul Be aware of the difference between core and styles: https://material-ui.com/customization/default-theme/#material-ui-core-styles-vs-material-ui-styles. |
Thanks @oliviertassinari.
To be honest I don't get the point here, nor how this is related to the issue. This means than I don't need the ThemeProvider because already shipped when importing from Just to give additional context: my code was working using I can quickly go back to old package-lock version, but I'd like to get the big picture |
@keul Alright, maybe the following will be clearer. You are injecting a new theme that is not compatible with the core components. You should use createMuiTheme. import { createMuiTheme } from "@material-ui/core";
const theme = createMuiTheme({
spacing: 4,
palette: {
primary: {
main: "#007bff",
},
}
}); |
@oliviertassinari well... thanks. This fixed the issue. I'm pretty sure I copied this raw code from the documentation, it's the same way-to-go I find at https://material-ui.com/styles/advanced/. As a new user (last time I used MUI it was version 0.x) this is not really clear but I probably have to give it some time. Sorry for the noise! |
Anything in https://material-ui.com/styles/x is Material Design unrelated. It's a styling solution for React. |
Sorry, I still can't understand. const styles = theme => {({
root: {
// JSS uses px as the default units for this CSS property.
padding: theme.spacing(2), // = 8 * 2
},
})}; |
@ByronHsu Yes, if you import from |
But it return |
@ByronHsu Do you have a reproduction? |
Sorry I found the problem. |
I'm having this issue as well and I'm using
This component is wrapped in a |
Same issue occurs if I instead use:
I get:
All MUI packages are up to date, master branch. |
Nevermind, rookie mistake. I forgot to wrap my new theme in |
same here |
I see this issue if I do everything as expected, except code for an outer theme when there isn't one. For example: breaks:
works:
I see there is a warning for this case. It seems like it should still work, though, or at least leave that logic to the provided function. |
go from change it to |
This is also an issue for me. It seems to be a type error, because the I'm logging the value itself and it's working, but next.js throws an error saying it doesn't exist. Breakpoints too. |
Thank you @ByronHsu its working |
How did you solve it, m having same issue |
|
import { makeStyles } from "@material-ui/styles"; |
@Dave7776 if you are using v4 both should work. If you are using v5 you need to import from '@material-ui/styles' and have a ThemeProvider at the top of your app. Take a look on the migration guide for more details: https://next.material-ui.com/guides/migration-v4/#main-content |
Hey bro llevaba tiempo buscando esta solucion muchas gracias de verdad respuesta clara, sincera y sencilla. |
Trying to fix another issue today I tried to reset my whole Material-UI 4.0.0 workspace, migrating both core and style to latest 4.0.1
As soon as I try to use a
ThemeProvider
I getTypeError theme.spacing is not a function
.Expected Behavior 🤔
Just want to see the theming working. I'm confused by the fact that
theme.spacing
seems used by both master and next branches, so this seems the way to go.Current Behavior 😯
See error above
Steps to Reproduce 🕹
Link: https://codesandbox.io/s/materialui-style-issue-rk8n0
Context 🔦
I started a whole new application and I'm trying to clue together all of the style feature of Material-UI. That said, before the migration to 4.0.1 of
style
module I had not such issues, so I'm unsure if 4.x releases are someway unstable or what.Your Environment 🌎
The text was updated successfully, but these errors were encountered: