如何防止 material-ui 包覆盖我的应用程序样式？答案

【问题标题】：how to prevent a material-ui package from overriding my app style?如何防止 material-ui 包覆盖我的应用程序样式？
【发布时间】：2021-12-01 08:38:36
【问题描述】：

我在 React-Gatsby 应用程序中使用最新的 Material-UI 安装。我为轮播安装了第三方软件包 (react-material-ui-carousel)。

当我使用这个包时，我发现它通过添加与我的应用程序的 css div 竞争的 css div 来覆盖我的一些 material-ui 样式。

data-emotion div 由我的应用添加，data-jss 样式 div 由包 react-material-ui-carousel 添加。

有没有办法将轮播样式限制为仅轮播组件，而不影响我页面上的其他 Material-ui 组件？（例如MuiButtonBase 包含覆盖我网站规则的MuiButtonBase-root 规则）

【问题讨论】：

标签： reactjs material-ui emotion

【解决方案1】：

尝试检查您的包裹锁并使用 3 个区块

"node_modules/react-material-ui-carousel": {
  "version": "2.3.7-mui5",
  "resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.7-mui5.tgz",
  "integrity": "sha512-XM6+kn6db++riBKUufl7XQI8eE/qj5XWpkDpHUWnioICCdUqx6cvWJmIqjBqcMNB4FgcgJFVmsE3iEKs/4gRIA==",
  "dependencies": {
    "auto-bind": "^2.1.1",
    "react-swipeable": "^6.1.0"
  },
  "peerDependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@mui/icons-material": "^5.0.0",
    "@mui/material": "^5.0.0",
    "@mui/styles": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
},

"react-material-ui-carousel": {
  "version": "2.3.7-mui5",
  "resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.7-mui5.tgz",
  "integrity": "sha512-XM6+kn6db++riBKUufl7XQI8eE/qj5XWpkDpHUWnioICCdUqx6cvWJmIqjBqcMNB4FgcgJFVmsE3iEKs/4gRIA==",
  "requires": {
    "auto-bind": "^2.1.1",
    "react-swipeable": "^6.1.0"
  }
},
    "react-material-ui-carousel": "^2.3.7-mui5",

【讨论】：

【解决方案2】：

您可以使用@material-ui/core/styles 中的StylesProvider，这样您可以为类名添加前缀并避免样式覆盖

import {
  MuiThemeProvider,
  ThemeProvider,
  StylesProvider,
  createGenerateClassName,
} from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
  seed: 'classes-custom-prefix',
});

export const Provider = ({ children, theme }) => {
  return (
    <StylesProvider generateClassName={generateClassName}>
      <MuiThemeProvider theme={theme}>
        <ThemeProvider theme={theme}>{children}</ThemeProvider>
      </MuiThemeProvider>
    </StylesProvider>
  );
};

【讨论】：

【解决方案3】：

我在生产和部署之间遇到了样式问题/不一致。对我来说，在没有“！important”的情况下设置元素样式和覆盖 MUI 样式的最佳方法是使用：

import { styled } from "@mui/material/styles";
import Button from "@material-ui/core/Button";

const CustomButton = styled(Button)(({ theme }) => ({
  display: "flex",
  ...
}));

然后代替使用

<Button ...args>label</Button>

使用

<CustomButton ...args>label</CustomButton>

【讨论】：