'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`
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.
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} }
`
render(
<div css = {customCss}>
This div has a hotpink background.
</div>
)
Sources
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 |