Material UI v4 makeStyles exported from a single file doesn't retain the styles on refresh

Question

I am using Material UI v4, i'm exporting my styles from a single file, But the styles won't work in other components styles.js

const useStyles = makeStyles(theme => ({
    root: {
      display: 'flex',
    },
    // textField component styles
    textFieldInput: {
      margin: theme.spacing(2),
      width: 250,
      minWidth: 250,
    },
    formControl: {
      margin: theme.spacing(2),
      minWidth: 120,
    },


})
export {useStyles}

In my component file

    ....
    const classes = useStyles(styles);

    return (
        <TextField
            className={classes.textFieldInput}
            label={label}
            placeholder={label}
            error={touched && invalid}
            helperText={touched && error}
            {...input}
            disabled={disabled || false}
            readOnly={readOnly || false}
            required={required || false}
            InputProps={{ readOnly, ...custom }}
            {...custom}
        />
    );
     ....

when i use it in my components the styles will work on the first hot reload but after that the styles wont have any effect any ideas why? and how i can fix this

Answer 1

I have been facing a similar problem and managed to solve it as below

root: {
        '&&': {
            width: "128px",
            height: "128px",
            margin: "8px",
        }
    },

I later also found an article about this here.

Using the double ampersands "&&" increases/doubles up the specificity/priority. So, for any class I wanted to override, I added the '&&' in my declared class.

This solved the problem for me without any noticeable downside but I don't know if this is actually a good practice. If anyone knows more about why not to use this, please let me know.