I've been going through some issues on Github reading about this kind of issues with the styles on production builds.
I am trying to figure out what is happening and I already applied some of the solutions they mentioned in their docs.
I have this kind of styles on 3 different components:
I am importing makeStyles from import { makeStyles } from '@material-ui/styles';
const useStyles = makeStyles({
root: {
minWidth: 110,
padding: 0
}
}, { index: 1 });
const useStyles = makeStyles({
root: (props: Partial<AutoCompleteProps>) => ({
position: 'absolute',
maxWidth: props?.optionsMaxWidth ?? 300,
width: '100%',
zIndex: 10,
marginTop: 5
})
}, { index: 1 });
const useStyles = makeStyles({
treeOption: {
cursor: 'pointer',
'&:hover': {
backgroundColor: styles.color.lightGrey
}
}
}, { index: 1 });
Setting that index: 1 there didn't help. I saw that is supposed to help on another github issue which I couldn't find.
These are my dependencies:
"devDependencies": {
"@commitlint/cli": "^8.3.5",
"@commitlint/config-conventional": "^8.3.4",
"@svgr/webpack": "^5.4.0",
"@types/jest": "^26.0.13",
"@types/node": "^14.10.1",
"@types/reach__router": "^1.3.5",
"@types/react": "^16.9.49",
"@typescript-eslint/eslint-plugin": "^3.10.1",
"@typescript-eslint/parser": "^3.10.1",
"acorn": "^7.4.0",
"colors": "^1.4.0",
"commitizen": "^4.2.1",
"coveralls": "^3.1.0",
"cross-env": "^7.0.2",
"css-loader": "^3.6.0",
"cz-conventional-changelog": "^3.3.0",
"eslint": "^6.8.0",
"eslint-config-semistandard": "^15.0.1",
"eslint-config-standard": "^13.0.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.2",
"eslint-plugin-standard": "^4.0.1",
"husky": "^4.3.0",
"jest": "^26.4.2",
"jest-config": "^26.4.2",
"lint-staged": "^10.3.0",
"prompt": "^1.0.0",
"replace-in-file": "^6.1.0",
"rimraf": "^3.0.2",
"semantic-release": "^17.1.1",
"shelljs": "^0.8.4",
"source-map-loader": "^1.1.0",
"style-loader": "^1.2.1",
"travis-deploy-once": "^5.0.11",
"ts-jest": "^26.3.0",
"ts-loader": "^7.0.5",
"ts-node": "^8.10.2",
"typedoc": "^0.17.8",
"typescript": "^3.9.7",
"webpack": "^4.44.1",
"webpack-bundle-analyzer": "^3.9.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"@apollo/react-hooks": "^3.1.5",
"@builder.io/sdk": "^1.1.17",
"@emotion/core": "^10.0.35",
"@emotion/styled": "^10.0.27",
"@graphql-codegen/cli": "^1.17.8",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@reach/router": "^1.3.4",
"@types/react-color": "^3.0.4",
"@types/uuid": "^8.3.0",
"@types/yup": "^0.29.7",
"ag-grid-community": "^23.2.1",
"ag-grid-react": "^23.2.1",
"apollo-boost": "^0.4.9",
"aws-sdk": "^2.755.0",
"axios": "^0.20.0",
"dotenv": "^8.2.0",
"dotenv-expand": "^5.1.0",
"downshift": "^6.0.6",
"file-loader": "^6.1.0",
"formik": "^2.1.4",
"graphql": "^15.3.0",
"graphql-tag": "^2.11.0",
"mobx": "^5.15.6",
"mobx-react": "^6.3.0",
"mobx-state-tree": "^3.17.2",
"react": "^16.13.1",
"react-apollo": "^3.1.5",
"react-apollo-hooks": "^0.5.0",
"react-color": "^2.18.1",
"react-dom": "^16.13.1",
"react-quill": "^1.3.5",
"react-treebeard": "^3.2.4",
"slugify": "^1.4.5",
"uuid": "^8.3.0",
"yup": "^0.29.3"
}
This is how it looks:
And this is how it is suppose to look:
The issue doesn't come when the page loads but if the user starts to go back and forth and click here and there, the styles start to be mess.
Any ideas?