Material-UI与react-emotion样式覆盖问题：生产环境padding被默认值覆盖

嘿，这个问题我之前踩过坑！生产环境下样式优先级反转确实挺闹心的，尤其是Material-UI和react-emotion混用的时候。咱们来一步步搞定它：

方法1：用Material-UI原生的样式方案（最推荐） #

Material-UI自带的sx属性（v5）或者makeStyles（v4）是和它的样式系统深度绑定的，不管开发还是生产环境，优先级都能稳稳压住默认样式。

对于Material-UI v5（推荐用sx） #

直接在CardHeader上用sx属性设置padding：

import CardHeader from '@mui/material/CardHeader';

function MyCustomCard() {
  return (
    <CardHeader
      sx={{ padding: 0 }} // 这里直接覆盖默认padding
      title="我的自定义卡片"
      subheader="这是一个没有内边距的头部"
    />
  );
}

sx属性会生成优先级更高的样式，完全不用担心生产环境被覆盖的问题。

对于Material-UI v4（用makeStyles） #

如果还在使用v4，用makeStyles生成自定义类：

import { makeStyles } from '@material-ui/core/styles';
import CardHeader from '@material-ui/core/CardHeader';

const useStyles = makeStyles({
  noPaddingHeader: {
    padding: 0,
  },
});

function MyCustomCard() {
  const classes = useStyles();
  return (
    <CardHeader
      className={classes.noPaddingHeader}
      title="我的自定义卡片"
    />
  );
}

makeStyles生成的样式会和Material-UI的默认样式一起处理，优先级更高，生产环境也不会翻车。

方法2：提升react-emotion样式的特异性 #

如果你一定要用react-emotion来写样式，那就通过提高选择器特异性来确保你的样式能覆盖默认值，避免生产环境打包顺序导致的优先级反转。

比如给CardHeader加个自定义类名，然后用更具体的选择器：

import { css } from '@emotion/react';
import CardHeader from '@mui/material/CardHeader';

const customHeaderStyle = css`
  // 结合Material-UI的默认类名，提高特异性
  &.MuiCardHeader-root {
    padding: 0;
  }
`;

function MyCustomCard() {
  return (
    <CardHeader
      className={customHeaderStyle}
      title="我的自定义卡片"
    />
  );
}

这种写法的选择器特异性比默认的.MuiCardHeader-root更高，不管打包顺序怎么变，你的样式都会生效。（尽量别用!important，除非万不得已，特异性优先更优雅）

方法3：调整样式注入顺序 #

如果上面的方法都不想用，还可以通过控制Material-UI和emotion的样式注入顺序，让你的自定义样式在默认样式之后加载。

在Material-UI v5中，用StyledEngineProvider和emotion的CacheProvider来配置：

import { StyledEngineProvider } from '@mui/material/styles';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';

// 创建emotion缓存，设置prepend为false，让emotion样式后加载
const emotionCache = createCache({
  key: 'mui-custom-cache',
  prepend: false,
});

function App() {
  return (
    <StyledEngineProvider injectFirst={false}>
      <CacheProvider value={emotionCache}>
        {/* 你的整个应用组件 */}
      </CacheProvider>
    </StyledEngineProvider>
  );
}

这样配置后，Material-UI的默认样式会先注入，你的emotion样式在后，自然就能覆盖默认值了。

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