Material UI 的 { makeStyles } 中的 '& .MuiTextField-root' 有什么用？

Question

我正在使用 Material-UI 通过一些资源在 React JS 中创建一个项目。我在 Form.js 文件中为我的应用程序创建了一些样式，如下所示 ---

 import useStyles from './styles';
 const classes = useStyles();

<form autoCapitalize='off' noValidate className={`${classes.root} ${classes.form}`} onSubmit={handleSubmit}>  ```

在styles.js--

export default makeStyles((theme) => ({
    
     root: {
     '& .MuiTextField-root': {
      margin: theme.spacing(1),
    },
  },
    form: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center',
  }

}));

现在我无法理解

的用法

     '& .MuiTextField-root': {
      margin: theme.spacing(1),
    }

谁能帮我解决这个问题，比如'& .MuiTextField-root'有什么用？？

当我尝试简单地使用

margin: theme.spacing(1),

它没有给顶部和底部的边距，但它的边距非常小从左到右。但是使用前者可以提供相等且更多的余量从每一侧到 .为什么会这样？？任何帮助将不胜感激。谢谢！

附上截图---FORM Image with '& .MuiTextField-root'

FORM Image WithOut '& .MuiTextField-root', just using root: {margin: theme.spacing(1)} only

Answer 1

& .MuiTextField-root 表示当前元素的任何子元素 class

Answer 2

如果你知道SCSS那么这是约定俗成的selectchildselect或者写class的。当您在表单中使用它时。所以文本字段是表单的 child。这就是为什么你必须 access/write 像这样。

下面的代码实际上意味着，任何包含 class 名称 MuiTextField-root 的 child 都将包含 margin css 规则。 Doc

'& .MuiTextField-root': {
    margin: theme.spacing(1),
}

Answer 3

您可以使用浏览器开发工具来识别要覆盖的组件的插槽。它可以为您节省很多时间。 MUI 注入 DOM 的样式依赖于遵循简单模式的 class 名称：[hash]-Mui[Component name]-[name of the slot].

⚠️ 这些 class 名称不能用作 CSS 选择器，因为它们不稳定，但是，MUI 使用一致的约定应用全局 class 名称：Mui[Component name ]-[插槽名称].

如果您想使用 classes 覆盖组件的样式，您可以使用每个组件上可用的 className 属性。要覆盖组件内不同部分的样式，您可以使用每个插槽可用的全局 classes，如上一节所述。

Material UI 的 { makeStyles } 中的 '& .MuiTextField-root' 有什么用？

What is the use of '& .MuiTextField-root' in { makeStyles } of Material UI?

css

reactjs

material-ui