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>
  );
}

What does the symbol '&$checked' mean used in this CodeSandbox? Please explain the meaning of each symbol in detail, and the related logic.

Thanks for answering.

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>
  );
}

What does the symbol '&$checked' mean used in this CodeSandbox? Please explain the meaning of each symbol in detail, and the related logic.

Thanks for answering.

• javascript
• reactjs
• material-ui
• jss

3 Answers 3

The & is a reference to the parent rule ("root" in this case). $ruleName (where "ruleName" is "checked" in this case) references a local rule in the same style sheet.

To clarify some of the terms above, the parameter to makeStyles is used to generate a style sheet potentially with multiple style rules. Each object key (e.g. "root", "checked") is referred to as a "rule name". When you call useStyles the resulting classes object contains a mapping of each rule name to a generated CSS class name.

So in this case let's say that the generated class name for "root" is "root-generated-1" and the generated class name for "checked" is "checked-generated-2", then &$checked is equivalent to .root-generated-1.checked-generated-2 meaning it will match an element that has both the root and checked classes applied to it.

As far as the effect on the Checkbox, the "checked" class is applied to the Checkbox by Material-UI when it is in a "checked" state. This style rule is overriding the default color of a checked Checkbox (the default is the secondary color in the theme).

Related answers and documentation:

• https://cssinjs/jss-plugin-nested?v=v10.0.0#use--to-reference-selector-of-the-parent-rule
• https://cssinjs/jss-plugin-nested?v=v10.0.0#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet
• Internal implementation of "makeStyles" in React Material-UI?

'&$checked' means you can override the element after checked.

And in your case, you are overriding the colour of checkbox after checked it

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

PFA for detail

You are probably referring to the .color>*:checked element