MUI是否有官方表单组件？自定义表单如何在主题中配置全局样式？

方案1：全局统一配置所有FormControl样式 #

MUI 主题原生支持全局覆盖指定组件的默认样式，直接在createTheme的components字段中配置MuiFormControl即可，配置后项目内所有FormControl都会自动应用定义的样式：

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

const theme = createTheme({
  components: {
    MuiFormControl: {
      styleOverrides: {
        root: {
          // 示例样式：统一设置宽度、下边距
          width: '100%',
          marginBottom: '16px',
        }
      }
    }
  }
});

方案2：仅自定义FormBody内的FormControl生效 #

如果不想全局污染其他场景的FormControl样式，只需要作用于你封装的表单容器内的控件，可以直接在FormBody的样式定义中添加后代选择器：

const FormBody = styled(Box)(() => ({ 
  display: 'flex',
  flexDirection: 'column',
  gap: '16px', // 也可以直接用gap控制表单项之间的间距
  // 嵌套选中内部的FormControl
  '& .MuiFormControl-root': {
    width: '100%',
    // 其他自定义样式
  }
}));

如果要把规则放在主题中统一管理，可以给FormBody添加自定义类名，再通过MuiCssBaseline注入全局规则：

// 主题配置
const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        '.custom-form-body .MuiFormControl-root': {
          marginBottom: '16px',
          width: '100%',
        }
      }
    }
  }
});

// 表单使用时添加对应类名
<FormBody className="custom-form-body" onSubmit={handleSubmitLogin(onLoginSubmit)} component="form">
  <FormControl>
  ...
  </FormControl>
</FormBody>

方案3：二次封装FormControl组件 #

如果需要更灵活的样式控制、甚至扩展额外属性，可以二次封装自定义的表单控件组件，所有表单统一使用该组件即可：

import { FormControl as MuiFormControl, styled } from '@mui/material';

// 封装带默认样式的表单控件
export const FormControl = styled(MuiFormControl)(({ theme }) => ({
  width: '100%',
  marginBottom: theme.spacing(2),
}));

// 表单内直接使用封装后的组件
<FormBody component="form">
  <FormControl>
  ...
  </FormControl>
</FormBody>

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