MaterialUI v5：修改Dialog嵌套TextField组件样式的方法

我尝试通过createTheme添加样式但未生效，若此方法不可行，如何使用form-field类实现？

现有组件结构 #

<Dialog ...>
  <DialogTitle>
    Edit Order
  </DialogTitle>

  <DialogContent>
    <Formik ...>
      <Form>
        <TextField />
        <TextField />
        ...
      </Form>
    </Formik>
  </DialogContent>
</Dialog>

尝试过的createTheme代码（未生效） #

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

const theme = createTheme({
  components: {
    MuiDialogContent: {
      styleOverrides: {
        textField: {
          padding-top: 0.5rem;
          padding-bottom: 0.5rem;
        }
      }
    }
    ...

已定义的CSS类 #

.form-field {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

方法一：修正createTheme配置实现样式 #

你之前的写法错误在于MuiDialogContent的styleOverrides里并没有textField这个内置类名，需要通过CSS后代选择器定位子元素的TextField：

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

const theme = createTheme({
  components: {
    MuiDialogContent: {
      styleOverrides: {
        root: {
          '& .MuiTextField-root': {
            paddingTop: '0.5rem',
            paddingBottom: '0.5rem'
          }
        }
      }
    }
  }
});

root是MuiDialogContent的根类名，通过& .MuiTextField-root选择器，可选中DialogContent下所有TextField组件，统一添加上下内边距。

方法二：使用自定义CSS类实现 #

方式1：给DialogContent添加容器类，批量控制子TextField #

修改DialogContent的代码，添加容器类名：

<DialogContent className="form-field-container">
  {/* 内部Formik、Form、TextField结构不变 */}
</DialogContent>

修改CSS，通过后代选择器生效：

.form-field-container .MuiTextField-root {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

方式2：直接给TextField绑定自定义类 #

如果需要精准控制单个TextField，可直接给组件传递className：

<TextField className="form-field" />
<TextField className="form-field" />

这种方式适合单独调整部分TextField的场景，若要统一所有子元素，方式1更高效。

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