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

【问题标题】：What the tag "& > *" means? Used in useStyles functions标签“& > *”是什么意思？在 useStyles 函数中使用
【发布时间】：2020-05-29 18:48:30
【问题描述】：

我使用 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>
  );
}

【问题讨论】：

这可能会有所帮助 - css-tricks.com/the-sass-ampersand

标签： css reactjs sass material-ui

【解决方案1】：

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

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

【讨论】：