Material-ui样式在生产构建中发生冲突

Question

我一直在阅读有关Github的一些问题，以了解有关生产构建样式的此类问题。

我试图弄清楚正在发生什么，我已经应用了他们在其docs中提到的一些解决方案。

我在3个不同的组件上有这种样式： 我正在从makeStyles

导入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 });

设置index: 1并没有帮助。我看到这应该可以解决另一个我找不到的github问题。

这些是我的依赖项：

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

外观如下： 这是看起来的样子：

页面加载时不会出现问题，但是如果用户开始来回移动并单击此处和此处，样式就会变得混乱。

有什么想法吗？