Material-ui: Is there a reason makeStyles is always called at the top-level scope?

[uzielmperez]

The 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>
}

[oliviertassinari]

Yes, to enforce the correct CSS injection order.

[uzielmperez]

Thank you! What is the preferred implementation in cases where the style will depend on props passed to the component?

const useStyles = makeStyles({
someClass: {
       padding: props.padding
}})

Declaring values at the global scope to make them accessible to makeStyles has proven problematic - overlap, etc.

Will the CSS injection order still be enforced if makeStyles is called as the very beginning of Component?

const Component = () => {
        const useStyles = makeStyles({...someStyles})
        const classes = useStyles()
        return <div className={classes.someClass}>Some Content</div>
}

[uzielmperez]

Thank you so much! Thank you for marking this as a question as well, my mistake, sorry.

I'm curious about the risks posed to the CSS injection order if I guarantee that makeStyles is the first thing called inside of Component. The current project is pretty heavily tied to MUI (we love it!), but I'm having difficulties with a particular use case that requires a dynamic solution.

[matthewkwong2]

What do you want to achieve exactly

[joshwooding]

@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

[uzielmperez]

@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:

const useStyles = makeStyles({
someClass:  {
       padding: props => props.padding
}})

const Component = props => {
        // *** pass props as an argument when useStyles is called ***
        const classes = useStyles(props)
        return <div className={classes.someClass}>Some Content</div>
}

[oliviertassinari]

@uzielmperez Not exactly, it's related to the correct order when applying two class names on the same element from two different components, e.g. <div class="MuiButtonBase-root MuiButton-root">.

[uzielmperez]

@oliviertassinari Even more informative, thank you. :)