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

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

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

[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