MUI与React中CSS最佳实践：内联CSS替代方案咨询

作为MUI新手，你可以用以下几种更易维护、复用的方式替代内联sx写法：

1. 使用MUI的Styled Components API #

把样式封装成独立的自定义组件，适合需要重复使用的样式场景：

import { Typography } from '@mui/material';
import { styled } from '@mui/material/styles';

const StyledTopologyHeading = styled(Typography)(({ theme }) => ({
  fontWeight: 'bold',
  color: '#1a759f',
  display: 'flex',
  justifyContent: 'center',
  margin: '20vh',
}));

// 使用时直接调用自定义组件
<StyledTopologyHeading variant="h5">Topology</StyledTopologyHeading>

这种方式能把样式和组件逻辑分离，后续修改或复用都更便捷。

2. 使用CSS Modules #

如果习惯传统CSS写法，CSS Modules可以帮你避免类名冲突：

首先创建TopologyStyles.module.css文件：

.topologyHeading {
  font-weight: bold;
  color: #1a759f;
  display: flex;
  justify-content: center;
  margin: 20vh;
}

然后在组件中导入并使用：

import { Typography } from '@mui/material';
import styles from './TopologyStyles.module.css';

<Typography variant="h5" className={styles.topologyHeading}>
  Topology
</Typography>

3. 自定义主题+全局类名（适合通用样式） #

如果这个样式是多个组件共用的，可以在MUI主题中定义全局类名统一管理：

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

const theme = createTheme({
  components: {
    MuiTypography: {
      variants: [
        {
          props: { variant: 'h5', className: 'topology-heading' },
          style: {
            fontWeight: 'bold',
            color: '#1a759f',
            display: 'flex',
            justifyContent: 'center',
            margin: '20vh',
          },
        },
      ],
    },
  },
});

// 在ThemeProvider包裹的组件中直接调用
<ThemeProvider theme={theme}>
  <Typography variant="h5" className="topology-heading">Topology</Typography>
</ThemeProvider>

这种方式能保持全局样式的一致性，适合通用样式的统一维护。

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