reactjs react jss如何定制html标签样式

mgdq6dx1 于 2023-03-01 发布在 React

关注(0)|答案(1)|浏览(135)

我使用的是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文档，我对以下内容感到困惑：

*和>是有效的css选择器，我可以理解，但是&在那里是什么意思呢？
1.我想把css选择器限制在按钮上，我应该用& > button还是& > Button？两个都可以用，但是我很困惑，最后浏览器显示的是button，所以用& > button更好？

reactjs

来源：https://stackoverflow.com/questions/63805961/react-jss-how-to-style-custom-html-tag

1条答案

按热度按时间

rekjcdws1#

- 问题1**：JSS和其他第三方React库，如样式化组件端口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;
  }
}

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

- 问题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，则仅选择div（&）的直接后代Button和ToggleButton中的button HTML元素。

赞(0）回复(0）举报 2023-03-01

我来回答

reactjs react jss如何定制html标签样式

1条答案

相关问题

热门标签

最新问答