标签“&> *”是什么意思？在 useStyles 函数中使用

Question

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

以下是他们文档中的示例：

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 & > *or 只是.root > *意味着类根的每个直接后代元素都将应用这些样式，但其中的元素不会。