What does the symbol '&$checked' mean

Question

import React from \'react\';
import Checkbox from \'@material-ui/core/Checkbox\';
import { createMuiTheme, makeStyles, ThemeProvider } from \'@material-ui/core/style         


        

Answer 1

'&$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

Answer 2

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.org/jss-plugin-nested?v=v10.0.0#use--to-reference-selector-of-the-parent-rule
• https://cssinjs.org/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?

Answer 3

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