Is there a reason makeStyles is always called at the top-level scope?
See original GitHub issueThe makeStyles implementations I’ve found generally follow something similar to this pattern:
const useStyles = makeStyles({...someStyles})
const Component = () => {
const classes = useStyles()
return <div className={classes.someClass}>Some Content</div>
}
Is there a reason makeStyles is not called within Component?
const Component = () => {
const useStyles = makeStyles({...someStyles})
const classes = useStyles()
return <div className={classes.someClass}>Some Content</div>
}
Issue Analytics
- State:
- Created 4 years ago
- Comments:8 (3 by maintainers)
Top Results From Across the Web
Is there a reason makeStyles is always called at the top-level ...
Declaring values at the global scope to make them accessible to makeStyles has proven problematic - overlap, etc.
Read more >reactjs - How to style components using makeStyles and still ...
When I use it, I get this error: "Cannot read property 'X' of undefined" and undefined is theme exactly! I tried withStyles(styles( ...
Read more >@material-ui/styles | Yarn - Package Manager
This release widens the peer dependency scope of React to accept ^17.0.0. ... [docs] makeStyles doesn't have access to the component's name (#19474)...
Read more >Design Patterns with React Easy State | by Bertalan Miklos
React Easy State is a transparent reactive state management library with two functions and two accompanying rules. Always wrap your components with view()...
Read more >The Extend Concept | CSS-Tricks
All three of the most popular CSS preprocessors support extend. I don't have any data, but in my experience this feature is confusing...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@oliviertassinari I had misunderstood what you meant by CSS injection order, sorry. What you were saying was that MUI injects its style tags last, allowing MUI tags to gain more specificity than any other tags that might be injected on the page, and that by calling makeStyles within the component, we risk jeopardizing this specificity by accident. Thank you, this was very informative. 😃
@matthewkwong2 The story is long, but in essence, we’re using a package that applied a label to an input using css (via the content property) and we need to be able to modify the label based on a label prop.
@joshwooding Thank you, this solved everything. I’m embarrassed by how google-able this solution was, I must not have been searching correctly.
For those with a similar question, I’ve included the solution below:
@uzielmperez Have you looked at the “adapting styles based on props” section in the documentation - https://material-ui.com/styles/basics/#adapting-based-on-props