Using multiple CSS rule names with the styled API in Material UI

Question

I'm using Material UI and I want to style a component using multiple rule names with the styled API.

Let's say I want to style the FormLabel Component in blue with the asterisk (required) in red.

With the Hook API I would do something like that:

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import MuiFormLabel from '@material-ui/core/FormLabel'

const useStyle = makeStyles({
  root: {
    color: 'blue'
  },
  asterisk: {
    color: 'red'
  },
})

const FormLabel = ({ children }) => {
  const classes = useStyle()
  return (
    <MuiFormLabel
      classes={{
        root: classes.root,
        asterisk: classes.asterisk
      }}
    >
      {children}
    </MuiFormLabel>
  )
}

Can I pass root AND asterisk to my component using the styled API?

I tried this but it doesn't work

import React from 'react'
import { styled } from '@material-ui/core/styles'
import MuiFormLabel from '@material-ui/core/FormLabel'

const StyledFormLabel = styled(MuiFormLabel)({
  '.MuiFormLabel-root': {
    color: 'blue'
  },
  '.MuiFormLabel-asterisk': {
    color: 'red'
  },
})

const FormLabel = ({ children }) => (
  <StyledFormLabel>{children}</StyledFormLabel>
)

Answer 1

Below is an example of the correct syntax. By default, the top-level keys in the object passed to styled are assumed to be CSS property names. By adding & at the beginning of the key, it lets styled know that you are defining a nested rule. .MuiFormLabel-root is unnecessary since the root level is where properties will be applied by default (e.g. color: "blue" in the example below). The & is a reference to the root-level class, so & .MuiFormLabel-asterisk targets descendant elements with the MuiFormLabel-asterisk class.

import React from "react";
import { styled } from "@material-ui/core/styles";
import MuiFormLabel from "@material-ui/core/FormLabel";

const StyledFormLabel = styled(MuiFormLabel)({
  color: "blue",
  "&.Mui-error": {
    color: "purple"
  },
  "& .MuiFormLabel-asterisk": {
    color: "green"
  },
  "& .MuiFormLabel-asterisk.Mui-error": {
    color: "red"
  }
});

const FormLabel = ({ children }) => (
  <>
    <StyledFormLabel required>{children}</StyledFormLabel>
    <br />
    <StyledFormLabel error required>
      {children}
    </StyledFormLabel>
  </>
);
export default FormLabel;