如何为非Material UI的React组件应用MUI样式系统？

当然可以在MUI组件之外使用它的样式系统，MUI的样式系统本身就设计为可独立于其组件库使用。你遇到的官方文档“Advanced”链接404属于文档路径更新导致的问题，下面直接给你实用的实现方案：

方法1：使用styled工具 #

这是MUI样式系统的核心工具，能将任意React组件（包括原生HTML元素）转换为具备MUI样式能力的组件：

import { styled } from '@mui/system';

// 为原生button添加MUI主题化样式
const StyledButton = styled('button')(({ theme }) => ({
  padding: theme.spacing(2, 4),
  backgroundColor: theme.palette.primary.main,
  color: theme.palette.common.white,
  borderRadius: theme.shape.borderRadius,
  border: 'none',
  cursor: 'pointer',
  '&:hover': {
    backgroundColor: theme.palette.primary.dark,
  },
}));

// 在业务组件中使用
function CustomButtonDemo() {
  return <StyledButton>自定义按钮</StyledButton>;
}

方法2：使用sx属性 #

sx是MUI提供的强大内联样式属性，支持主题变量、响应式设计等特性，只需用ThemeProvider包裹应用即可生效：

1. 根组件配置主题提供者：

import { ThemeProvider, createTheme } from '@mui/system';

// 可自定义主题配置，比如调色板、排版等
const theme = createTheme();

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 你的应用所有组件 */}
      <CustomDivDemo />
    </ThemeProvider>
  );
}

2. 在自定义组件中使用sx：

function CustomDivDemo() {
  return (
    <div
      sx={{
        padding: 3,
        backgroundColor: 'background.paper',
        boxShadow: 1,
        borderRadius: 2,
        maxWidth: '600px',
        margin: '0 auto',
      }}
    >
      这是一个用sx属性样式化的普通div
    </div>
  );
}

方法3：直接调用主题变量 #

如果需要在自定义样式逻辑中访问MUI主题，可通过useTheme钩子获取：

import { useTheme } from '@mui/system';

function ThemedTextDemo() {
  const theme = useTheme();
  const textStyle = {
    color: theme.palette.text.primary,
    fontSize: theme.typography.body1.fontSize,
    fontFamily: theme.typography.fontFamily,
  };

  return <p style={textStyle}>使用MUI主题变量的文本</p>;
}

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