css - 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' 有什么用？？

当我尝试简单地使用

边距:theme.spacing(1),

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

附加屏幕截图 --- FORM Image with '& .MuiTextField-root'

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

Answer 1

如果您知道 SCSS 那么这是选择子选择器为其编写类的约定。当您在表单中使用它时。所以文本字段是表单的子项。这就是为什么您必须像这样访问/写入它。

下面的代码实际上意味着，任何包含类名 MuiTextField-root 的子项都将在其中包含 margin css 规则。 Doc

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