React JSS如何为自定义HTML标签设置样式

Question

我正在使用 material-ui，请参见以下示例代码：

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

const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
    },
  },
}));

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

  return (
    <div className={classes.root}>
      <Button variant="contained">Default</Button>
      <Button variant="contained" color="primary">
        Primary
      </Button>
      <Button variant="contained" color="secondary">
        Secondary
      </Button>
      <Button variant="contained" disabled>
        Disabled
      </Button>
      <Button variant="contained" color="primary" href="#contained-buttons">
        Link
      </Button>
    </div>
  );
}

这是我第一次使用 jss，我尝试用 & > * 玩耍来理解它的工作方式，我猜它是某种 CSS 选择器，但是查阅了这里和这里的文档后，我对以下内容感到困惑：

1. * 和 > 是有效的 CSS 选择器，我可以理解，但是 & 的意义是什么？

2. 我想将 CSS 选择器限制为仅适用于按钮，应该使用 & > button 还是 & > Button？两者都可以工作，但我很困惑，在最终向浏览器显示的内容中，应该使用 button，所以最好使用 & > button 吗？

- Sam YC

---

& 通常指父元素，并有时用于提高选择器的特异性。为什么不创建第二个样式键值对，即 button:... 并将其应用于按钮，例如 <Button className={classes.button} ...？ - Drew Reese

在这种情况下，我必须为所有按钮添加，但是在父节点上声明，只需要一个就足够了。 - Sam YC

Answer 1

问题 1：JSS和其他第三方React库（例如styled-components）将SCSS（Sass）功能移植到CSS-in-JS中，以提供扩展的CSS功能。

CSS中没有看到&，因为这是SCSS（Sass）功能。Sass是一种预处理器脚本语言，可以通过增加更多功能来扩展常规CSS：

• 允许您在样式化组件或HTML元素时使用嵌套。
• &是父选择器。它引用嵌套它的HTML元素。

在这种情况下，&引用root，因为它直接嵌套在root内。 & > *将样式应用于所有直接后代（>）根（&）的元素（*）。

root: {
  '& > *': {
    margin: theme.spacing(1),
  }
}

示例: & 可以让你的生活更加容易，一个很好的例子是将鼠标悬停状态应用于按钮。

在普通的 CSS 中，你可以这样做：

button {
  background-color: tomato;
}

button:hover {
  opacity: 0.5;
}

使用 SCSS 可以嵌套和使用父选择器(&)来实现此操作：

button {
  background-color: tomato;
  &:hover {
  opacity: 0.5;
  }
}

问题2：在ReactJS中，组件以大写字母开头，而HTML元素以小写字母开头。因此，Button是React组件，而button是普通的HTML元素。

您可以创建一个由button、img和p组成的Button组件。 & > Button将选择所有直接位于&（&的值取决于您的代码的其余部分，使用上述信息即可解决）下的Button React组件，而& >将选择所有直接位于&下的button HTML元素。 示例：假设您有一个包含Button React组件（具有一系列HTML元素）和ToggleButton React组件（具有一系列HTML元素）的div：

• 如果您使用& > Button，您只会选择位于div（&）下的Button中直接位于其下属的button HTML元素。
• 如果您使用& > button，您只会选择位于div（&）下的Button和ToggleButton中直接位于其下属的button HTML元素。

参考：https://cssinjs.org/from-sass-to-cssinjs、https://sass-lang.com/documentation/style-rules/declarations#nesting、https://sass-lang.com/documentation/style-rules/parent-selector、https://styled-components.com/docs/faqs#can-i-nest-rules。

- Steve Cruz