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

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

import { keyframes } from "@mui/system";
const keyframeSpinner = keyframes`
    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.

Solution 1:[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} }

  <div css = {customCss}>
    This div has a hotpink background.


This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 pez