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

问题描述

我正在使用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选择器，但是请检查文档{{3 }}和here，我对以下内容感到困惑：

我可以理解

1. *和>是有效的CSS选择器，但是&的含义是什么？

2. 我想将css选择器限制为仅应用于按钮，我应该使用& > button还是& > Button？两者都有效，但最后我感到困惑，要向浏览器显示的是button，所以最好使用& > button？

解决方法

问题1 ：JSS和其他第三方React库（如引擎盖下的样式化组件）使用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组件（＆的值取决于代码的其余部分，加上上面我给您提供的信息，您就可以找出来），同时& > will select all 按钮HTML元素，这些元素是＆的直接后代。

示例：设想一种情况，您有div包含一个Button React组件（其组成中包含按钮HTML元素）和一个ToggleButton React Component（在其组成中具有按钮HTML元素）：

• 如果使用& > Button，则只会在button（Button的直接后代）div中选择& HTML元素。
• 如果您使用& > button，则只会在button和Button的直接后代中选择{{1} {1}}。