From what I've learned, MUI 5 utilizes Emotion for its styling framework. Emotion offers a convenient helper function called css, which generates a string - a class name that can be used as a value for the className property or any other relevant property.
import { css, cx } from '@emotion/css'
render(
<div
className={css`
padding: 32px;
background-color: hotpink;
font-size: 24px;
`}
>
Text
</div>
)
I've searched extensively but couldn't find an equivalent in MUI. While there is a css function in system and styled-engine, it doesn't function similarly as it returns SerializedStyles.
The scenario where I aim to utilize it is as follows:
I have a component that allows you to pass class names (as strings) for different parts of that component, enabling flexibility in changing the component's styles. It seems like this css function (as demonstrated in the Emotion documentation) could assist with this.
For example:
const headerStyle = css`
color: blue;
border-bottom: 1px solid red;
`;
<Component
headerClassName={headerStyle}
footerClassName={css`
color: gray;
font-size: 2rem;
`}
/>
Although I could potentially resolve it using makeStyles(), the syntax presented in the screenshot above appeals more to me than the "legacy" solution.