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

如何解决Material-ui样式在生产构建中发生冲突

我一直在阅读有关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"
  }

外观如下：

这是看起来的样子：

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

有什么想法吗？