Is there a way to "inject" pure CSS into MUI v5

Question

I have a custom spinner that is currently using keyframes like so:

import { keyframes } from "@mui/system";
...
const keyframeSpinner = keyframes`
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
`;
...
<Box
  sx={{
    animation: `${keyframeSpinner} 1s linear infinite`,
  }}
/>
...

I don't want to import @mui/system and I don't want to use styled components.

So, I'm trying to find a solution where I can uses pure css or another solution that I'm unaware of.

Answer 1

You can easily apply in-line CSS styles to components using emotion, which is also used by MUI.

For example, here is the css prop from emotion being used to customize background-color and hover on a div. The code you write in the css prop can be pure CSS.

import { css, jsx } from '@emotion/react'

const color = 'darkgreen'

const customCss = css`
  background-color: hotpink
  &:hover { color: ${color} }
`

render(
  <div css = {customCss}>
    This div has a hotpink background.
  </div>
)