如何阻止Material-UI第三方包覆盖应用自身的原有样式？

• 方案1：调整样式注入顺序，提升全局样式优先级 #

你可以在项目根入口（通常是gatsby-browser.js或者根Layout组件），用MUI提供的StyleEngineProvider配置样式注入规则，确保你的全局样式优先级高于第三方组件注入的JSS样式：

import { StyleEngineProvider } from '@mui/material/styles';

const RootWrapper = ({ children }) => {
  return (
    <StyleEngineProvider injectFirst={false}>
      {children}
    </StyleEngineProvider>
  );
};

export default RootWrapper;

设置injectFirst={false}会让你的Emotion样式注入位置晚于第三方组件的JSS样式，相同权重下后注入的样式会生效。 #

• 方案2：给轮播组件添加样式命名空间，实现完全隔离 #

如果要彻底避免样式冲突，你可以给react-material-ui-carousel组件外层包裹旧版MUI的StylesProvider，给它的所有JSS样式添加自定义前缀，这样它的样式规则只会匹配带前缀的组件，不会影响全局的MUI组件：

import { StylesProvider, createGenerateClassName } from '@material-ui/core/styles';
import Carousel from 'react-material-ui-carousel';

// 生成带自定义前缀的类名
const generateClassName = createGenerateClassName({
  productionPrefix: 'carousel-',
});

const MyCarousel = (props) => {
  return (
    <StylesProvider generateClassName={generateClassName}>
      <Carousel {...props} />
    </StylesProvider>
  );
};

export default MyCarousel;

配置后轮播组件生成的所有类名都会带上carousel-前缀，它定义的.MuiButtonBase-root规则会变成.carousel-MuiButtonBase-root，不会匹配到你全局的MUI ButtonBase组件。 #

• 方案3：提升全局自定义样式的权重 #

如果你只需要修复个别被覆盖的样式规则，可以直接在你的全局样式文件里给对应规则提升权重，比如：

/* 你的全局样式文件 */
:root .MuiButtonBase-root {
  /* 把你之前预设的样式写在这里，选择器权重高于第三方组件的普通类选择器 */
}

加了:root前缀后，该选择器的权重会高于轮播组件注入的普通.MuiButtonBase-root规则，不会被覆盖。

内容的提问来源于stack exchange，提问作者Yaron