代码之家 › 专栏 › 技术社区 › Sam YC

react-jss如何设置自定义html标签的样式

jss material-ui reactjs css javascript

Sam YC · 技术社区 · 4 年前

我正在使用 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选择器,我能理解,但什么是 & 意思是?
我想将css选择器限制为仅应用于按钮,我应该使用吗 & > button 或 & > Button ?两者都在工作,但我很困惑,最后,浏览器显示的是什么 button ,所以最好使用 &>按钮 ?

0 回复 | 直到 4 年前

Steve Cruz 2 年前

问题1 :JSS和其他第三方React库(如样式化组件)移植SCSS(Sass)功能,为JS中的CSS提供扩展的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;
  }
}

问题2 :在ReactJS中,组件以大写字母开头,而HTML元素以小写字母开头。所以 Button 是一个React组件 button 是香草HTML元素。

您可以创建 按钮 由以下材料制成的组件 按钮 与A img 以及a p 里面。

& > Button 将选择全部 按钮 直接派生的反应组件 & (&的值取决于代码的其余部分,根据我上面提供的信息,您将能够弄清楚)而 & > 将选择全部 按钮 HTML元素是的直接后代 & .

例子 :想象一下,你有 div 包含a 按钮 React组件(在其组成中有一个按钮HTML元素)和一个 ToggleButton React组件(在其组成中有一个按钮HTML元素):

如果你使用 &>按钮 ,您将只选择 按钮 中的HTML元素 按钮 那是他们的直系后代 div ( & ).
如果你使用 & > button ,您将只选择 按钮 HTML元素在 按钮 和in 切换按钮 他们是 div ( & ).