标记“＆> *”是什么？在useStyles函数中使用

Question

我在Material-UI上使用React一段时间，我注意到在某些示例中，当他们使用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

无礼，&允许您“链接” 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 > *意味着该类根的每个直接后代元素都将应用那些样式，但是其中的元素将没有这些样式。