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

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;