Ошибки рендеринга Material-UI в производстве / сборке - PullRequest
Новая
       59

Ошибки рендеринга Material-UI в производстве / сборке

0 голосов
/ 19 июня 2020

У меня большие проблемы с созданием моего приложения-реакции.

Я использую material-ui / core v.4.10.2 на обычных сценариях реакции start dev-server, все работает отлично.

Но при сборке и обслуживании через Nginx или npm -module serve рендеринг работает некорректно ...

(я видел похожие проблемы в интерфейсе материалов Github, но все они были ( ложно) закрыто

Вот мой пакет. json на случай, если что-то не так с моими зависимостями (что я определенно не думаю) 

{
  "name": "web_app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.10.2",
    "@material-ui/styles": "4.10.0",
    "@material-ui/icons": "^4.2.1",
    "@material-ui/lab": "^4.0.0-alpha.45",
    "rc-color-picker": "^1.2.6",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-infinite-scroll-hook": "^2.0.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.1.1",
    "tinycolor2": "^1.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@date-io/date-fns": "^1.3.11",
    "@material-ui/pickers": "^3.2.7",
    "@mui-treasury/styles": "^1.1.0",
    "@trendmicro/react-sidenav": "^0.4.5",
    "browserfs": "^1.4.3",
    "cronstrue": "^1.85.0",
    "date-fns": "^2.0.0-beta.5",
    "formik": "^2.1.4",
    "i18next": "^17.0.13",
    "i18next-browser-languagedetector": "^3.0.3",
    "i18next-xhr-backend": "^3.1.2",
    "lodash": "^4.17.15",
    "material-ui-confirm": "^2.0.4",
    "moment": "^2.24.0",
    "react-animated-slider": "^2.0.0",
    "react-beautiful-dnd": "^13.0.0",
    "react-blur-image-loader": "^0.2.2",
    "react-digital-clock": "^0.1.2",
    "react-dropzone-uploader": "^2.10.1",
    "react-fine-uploader": "^1.1.1",
    "react-i18next": "^10.12.2",
    "react-image-lightbox": "^5.1.1",
    "react-picky-date-time": "^1.3.2",
    "react-router-dynamic-breadcrumbs": "^2.2.0",
    "react-sticky-el": "^2.0.5",
    "recompose": "^0.30.0",
    "store2": "^2.10.0",
    "tubular-react": "^4.1.31",
    "yup": "^0.28.4"
  }
}

Изображения представления в рабочей версии и Dev-версии

Стили пользовательского интерфейса материала не отображаются

Даны уникальные имена классов.

Ничего не получилось ... к сожалению.

Надеюсь, что у кого-нибудь были подобные проблемы. Я видел, как кто-то открывал проблему на Github MUI, но, как я уже сказал, она, к сожалению, закрыта

https://github.com/mui-org/material-ui/issues/21502

1 Ответ

2 голосов
/ 29 июня 2020

У меня была точно такая же проблема. Оказалось, что Webpack нарушит правила приоритета JSS в Material UI. Вам необходимо вручную переопределить порядок впрыска с помощью параметра индекса.

В вашем makeStyles() или withStyles() добавьте {index: 1}: 

//Hook
const useStyles = makeStyles({
    // your styles here
}, {index: 1})

// HOC 
MyComponent = withStyles({
    // your styles here
}, {index: 1})(MyComponent)
...