如何禁用Material UI生成的CSS类，强制使用内联样式？

嘿，我来帮你搞定这个问题！Material-UI（现在更名为MUI）默认依赖JSS（v4及更早）或Emotion（v5+）生成那些.jss1、.jss2这类自动命名的样式类，不过确实有办法让你主打内联样式，甚至尽可能禁用这些自动生成的类。我给你整理几个实用方案：

方案1：直接用原生内联样式+清除默认类名 #

这是最直接的方式——给组件传递style属性写内联样式，同时把className设为空字符串，来覆盖掉默认生成的类。比如按钮组件：

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

function CustomInlineButton() {
  return (
    <Button
      className="" // 清空默认类名，减少自动生成的JSS类
      style={{
        backgroundColor: '#2196f3',
        color: '#fff',
        padding: '10px 24px',
        borderRadius: '4px',
        border: 'none',
        cursor: 'pointer',
        fontSize: '16px',
        '&:hover': {
          backgroundColor: '#1976d2'
        }
      }}
    >
      纯内联样式按钮
    </Button>
  );
}

注意：少数组件的核心交互样式可能还是会生成少量类，但主体外观已经完全由你的内联样式控制了。

方案2：用MUI v5+的sx属性（推荐） #

如果你用的是MUI v5及以上版本，sx属性是官方推荐的内联样式方案——它支持主题变量、伪类、响应式布局，比原生style灵活太多，同时能更精准地覆盖默认样式。配合className=""也能大幅减少自动生成的类：

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

function SxInlineButton() {
  return (
    <Button
      className=""
      sx={{
        bgcolor: 'primary.main', // 直接用主题里的主色
        color: 'white',
        px: 4, // 主题化的内边距
        py: 1.5,
        borderRadius: 2,
        border: 0,
        fontSize: '1rem',
        '&:hover': {
          bgcolor: 'primary.dark' // hover时用主题里的深色主色
        }
      }}
    >
      用sx的内联样式按钮
    </Button>
  );
}

sx会把样式编译成尽可能少的内联样式（或少量必要的辅助类），既保留了MUI的主题能力，又满足你用内联样式的需求。

方案3：极端方案——完全禁用默认样式生成 #

如果你真的要彻底清除所有自动生成的JSS/Emotion类，那可以通过自定义主题来清空所有组件的默认样式：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';

// 创建一个清空了默认样式的主题
const noDefaultStylesTheme = createTheme({
  cssVariablesRoot: false, // 禁用CSS变量生成
  components: {
    // 逐个清空你用到的组件默认样式
    MuiButton: {
      styleOverrides: {
        root: {} // 清空按钮的所有默认样式
      }
    },
    // 其他组件比如MuiTextField、MuiCard等，都可以这样设置
  }
});

function App() {
  return (
    <ThemeProvider theme={noDefaultStylesTheme}>
      <Button
        style={{
          // 完全自定义的内联样式
          backgroundColor: 'green',
          color: 'white',
          padding: '8px 20px',
          borderRadius: '6px'
        }}
      >
        无任何默认类的按钮
      </Button>
    </ThemeProvider>
  );
}

这个方法比较极端，因为你需要手动处理所有用到的组件的默认样式，适合完全自定义UI、不想留任何MUI默认样式痕迹的场景。

总的来说，完全禁用所有自动生成的类其实没必要（毕竟有些类是用来处理组件交互逻辑的），但上面的方案足够让你把样式控制权牢牢握在手里，满足你用内联样式的需求。

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