如何在 createTheme 函数中为 TextField 中的标签设置样式答案

【问题标题】：How to style label in TextField in createTheme function如何在 createTheme 函数中为 TextField 中的标签设置样式
【发布时间】：2023-01-04 00:12:17
【问题描述】：

我试图将标签的边距（请参阅问题的附加图像）从 px 更改为 em/rem，但我不知道应该在哪里编写样式来构造。我在 MUI 文档中找不到“相邻兄弟组合器”。

createTheme({
  MuiTextField: {
      defaultProps: {
        // props
      },
      styleOverrides: {
        root: {
          // styles
        }
      }
    }
  })

generated css style in inspector tab

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

如果您使用的是 material-ui 5：

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

const theme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          '& label': {
            margin: '2rem',
          },
        },
      },
    },
  },
});

export default theme;

https://mui.com/pt/material-ui/customization/theme-components/

【讨论】：

感谢您的回答，但这将改变整个 TextField。我试图仅移动标签（请参阅问题的附加图像 - label+.css-MuiInputBase-root-MuiInput-root）。我编辑了问题，我错过了关于标签的问题
抱歉，我编辑了答案以向 TextField 标签添加边距。
'& label'改变了“MuiFormControl-root-MuiTextField-root label”的样式，但是“label+.css-MuiInputBase-root-MuiInput-root”没有，这里还是16px。此样式应用于标签后的元素 div，它包装输入元素。

【解决方案2】：

我终于解决了它 ;) 我在 InputLabel 中添加了这一行“& + .MuiInputBase-root”来更改 TextField 的（和另一个输入）标签

  MuiInputLabel: {
    defaultProps: {
      // props
    },
    styleOverrides: {
      root: {
        // styles
        "& +.MuiInputBase-root": {
          marginTop: '2em'
        }
      }
    }
  }

【讨论】：