符号“&$checked”是什么意思

IT技术 javascript reactjs material-ui jss
2021-04-03 14:53:08
import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles';
import { orange } from '@material-ui/core/colors';

const useStyles = makeStyles(theme => ({
  root: {
    color: theme.status.danger,
    '&$checked': {
      color: theme.status.danger,
    },
  },
  checked: {},
}));

function CustomCheckbox() {
  const classes = useStyles();

  return (
    <Checkbox
      defaultChecked
      classes={{
        root: classes.root,
        checked: classes.checked,
      }}
    />
  );
}

const theme = createMuiTheme({
  status: {
    danger: orange[500],
  },
});

export default function CustomStyles() {
  return (
    <ThemeProvider theme={theme}>
      <CustomCheckbox />
    </ThemeProvider>
  );
}

此 CodeSandbox 中使用的符号“&$checked”是什么意思请详细解释每个符号的含义,以及相关的逻辑。

谢谢回答。

3个回答

&是给父规则(在此情况下的“根”)的引用。$ruleName(在这种情况下,“ruleName”被“选中”)引用同一样式表中的本地规则。

为了澄清上面的一些术语,参数 tomakeStyles用于生成可能具有多个样式规则的样式表。每个对象键(例如“root”、“checked”)被称为“规则名称”。当您调用时useStyles,结果classes对象包含每个规则名称到生成的 CSS 类名称的映射。

因此,在这种情况下,假设“root”的生成类名称是“root-generated-1”,“checked”的生成类名称是“checked-generated-2”,则&$checked相当于.root-generated-1.checked-generated-2意味着它将匹配一个应用rootchecked类的元素

至于对 的影响Checkbox当 Material-UI 处于“已检查”状态时,“已检查”类会应用于Checkbox此样式规则覆盖选中复选框默认颜色(默认为主题中的辅助颜色)。

相关答案和文档:

你的回答很棒。我也想问一下'&$checked'中的单引号是什么意思。有什么文件吗?对不起,也许我太饥渴了。
2021-05-26 14:53:08
单引号只是用于定义字符串的 JavaScript 语法。
2021-06-04 14:53:08

'&$checked' 意味着您可以在选中后覆盖该元素。

在您的情况下,您将在选中复选框后覆盖它的颜色

"&$checked": {
      color: theme.status.danger
    }

PFA 详情

选中该框后,我已将颜色覆盖为绿色

您可能指的是.color>*:checked元素