反应 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 and here，我对以下内容感到困惑：

* 和 > 是有效的 css 选择器，我能理解，但是 & 是什么意思？
我想限制 css 选择器只应用于按钮，我应该使用 & > button 还是 & > Button？两者都可以，但我很困惑，最后要显示给浏览器的是 button，所以最好使用 & > button?

Answer 1

问题 1：JSS 和其他 third-party React 库，例如 styled-components 在底层使用 SCSS（Sass) 提供 CSS-in-JS.

您没有在 CSS 中看到 &，因为它是 SCSS (Sass) 特征。 Sass 是一种预处理器脚本语言，扩展了普通的 CSS 并具有更多功能：

它允许您在设置组件或 html 元素样式时使用嵌套。
& 是父 select 或者。它引用嵌套的 HTML 元素。

在这种情况下，& 引用 root，因为它直接嵌套在其中。 & > * 将样式应用到作为根 (&) 的直接后代 (>) 的所有元素 (*)。

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

示例：&可以让您的生活更轻松，一个很好的例子是将悬停状态应用于按钮。

在正常情况下 CSS 你会这样做：

button {
  background-color: tomato;
}

button:hover {
  opacity: 0.5;
}

对于 SCSS，您可以使用嵌套和父 select 或 (&) 来执行此操作：

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

参考：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

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

您可以创建一个 Button 组件，它由一个 button 和一个 img 和一个 p 组成。

& > Button 将 select 所有 Button 反应组件都是 & 的直接后代（& 的值取决于你的代码的其余部分，以及我上面给你的信息你将能够弄清楚）而 & > will select all button` HTML 元素是 &.

的直接后代

示例：想象这样一种情况，您有 div，其中包含一个 Button React 组件（在其组件中有一个按钮 HTML 元素组合）和一个 ToggleButton React 组件（在其组合中有一个按钮 HTML 元素）：

如果您使用 & > Button，您只会 select button HTML 中的 Button 元素，它是 div (&).
如果您使用& > button，您只会select button HTML 中Button 和ToggleButton 中直接的元素div (&).

反应 jss 如何设置自定义 html 标签的样式

react jss how to style custom html tag

javascript

css

reactjs

material-ui

jss