如何在MUI组件中实现文本前添加星号？

如果是给TextField这类组件的标签前加星号（通常用于标记必填项），有几种实用的实现方式：

• 直接拼接星号到标签文本
  最简单的方式是直接在label属性里插入带星号的内容，还可以给星号设置醒目颜色：

  import TextField from '@mui/material/TextField';
  
  <TextField
    label={<span style={{ color: '#d32f2f' }}>*</span> 用户名}
    variant="outlined"
  />
  

• 通过FormControl+InputLabel自定义样式
  若需要更精细的样式控制，可结合FormControl和InputLabel组件实现：

  import TextField from '@mui/material/TextField';
  import FormControl from '@mui/material/FormControl';
  import InputLabel from '@mui/material/InputLabel';
  
  <FormControl variant="outlined" sx={{ width: '250px' }}>
    <InputLabel htmlFor="required-field">
      <span sx={{ color: 'error.main', marginRight: 0.5 }}>*</span> 邮箱地址
    </InputLabel>
    <TextField
      id="required-field"
      label="邮箱地址"
      variant="outlined"
    />
  </FormControl>
  

• 全局主题配置自动添加
  如果希望所有标记为required的TextField自动显示星号，可以通过自定义MUI主题统一实现：

  import { createTheme, ThemeProvider } from '@mui/material/styles';
  import TextField from '@mui/material/TextField';
  
  const theme = createTheme({
    components: {
      MuiInputLabel: {
        styleOverrides: {
          root: {
            '&.Mui-required:not(.MuiInputLabel-shrink)::before': {
              content: '"*"',
              color: 'error.main',
              marginRight: '4px',
            },
          },
        },
      },
    },
  });
  
  function App() {
    return (
      <ThemeProvider theme={theme}>
        <TextField label="用户名" required variant="outlined" />
        <TextField label="密码" required variant="filled" />
      </ThemeProvider>
    );
  }
  

以上三种方式可按需选择：单个组件快速实现选第一种，需要自定义样式选第二种，全局统一规范选第三种。

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