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

Posted 2023-03-15

【中文标题】如何防止 material-ui 包覆盖我的应用程序样式？

【英文标题】：how to prevent a material-ui package from overriding my app style?

【发布时间】：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 规则）

【参考方案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>