javascript - 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 选择器，但通过文档检查 here和 here ，我对以下内容感到困惑:

1. * 和 > 是有效的 css 选择器，我能理解，但是 & 是什么意思？

2. 我想限制 css 选择器只应用于按钮，我应该使用 & > button 还是 & > Button？两者都可以，但我很困惑，到底要显示给浏览器的是button，所以还是用& > button比较好？

Answer 1

问题 1:JSS 和其他第三方 React 库(例如 styled-components under the hood)使用 SCSS (Sass) 提供 CSS-in-JS。

你没见过&在 CSS 中，因为它是 SCSS (Sass) 的一个特性。 Sass 是一种预处理器脚本语言，它扩展了普通 CSS 的更多功能:

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

在这种情况下 &引用文献 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;
  }
}

1. 引用:https://cssinjs.org/from-sass-to-cssinjs
2. 引用:https://sass-lang.com/documentation/style-rules/declarations#nesting
3. 引用:https://sass-lang.com/documentation/style-rules/parent-selector

问题 2:在 ReactJS 中，组件以大写字母开头，而 HTML 元素以小写字母开头。所以Button是一个 React 组件并且 button是普通的 HTML 元素。

您可以创建一个 Button由 button 组成的组件用img和一个 p里面。

& > Button将选择所有 Button react 组件是 & 的直接后代(& 的值取决于您的其余代码，使用我上面提供的信息您将能够计算出来)而 & >将选择所有 button & 的直接后代的 HTML 元素.

示例:想象一下您有 div 的情况包含 Button React 组件(在其组合中有一个按钮 HTML 元素)和一个 ToggleButton React 组件(在其组合中有一个按钮 HTML 元素):

• 如果您使用 & > Button , 您只会选择 button Button 中的 HTML 元素那是 div 的直接后代(&)。
• 如果您使用 & > button , 您只会选择 button Button 中的 HTML 元素在ToggleButton是 div 的直系后代(&)。