css - 标签 "& > *"是什么意思？在 useStyles 函数中使用

Question

我将 React 与 Material-UI 一起使用了一段时间，我注意到在某些示例中，当他们使用 useStyle 时，他们创建了一个名为 root 的类，然后他们使用了这个标签 & > *。我尝试搜索这意味着什么，但很难搜索到。

Here遵循他们文档中的示例:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    '& > *': {
      margin: theme.spacing(1),
      width: theme.spacing(16),
      height: theme.spacing(16),
    },
  },
}));

export default function SimplePaper() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Paper />
    </div>
  );
}

Answer 1

在 sass 中，& 允许您“链接”css 选择器，在常规 css 中，> 表示直接后代，因此如果您只是试图定位顶级 div 在您可以使用的东西中 > 例如

// css
article > div {
  font-size: 40px;
}

// html
<article>
  <div>
    Heading // this is 40px because this div is a direct descendant of article
    <div>
      Some content // this is unaffected because it's two levels away from article
    </div>
  </div>
  <div>
    Another heading // this is also 40px big, because it is only one level deep in article
  </div>
</article>

* 选择器意味着一切

因此在您给出的示例中 .root & > * 或只是 .root > * 意味着类根的每个直接后代元素都将应用这些样式它，但其中的元素不会。