有没有办法 "inject" 纯 CSS 进入 MUI v5

Question

我有一个自定义微调器，目前正在使用如下关键帧：

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

我不想导入@mui/system，我也不想使用样式组件。

所以，我正在尝试找到一个可以使用纯 css 或我不知道的其他解决方案的解决方案。

Answer 1

您可以使用 emotion 轻松地将 in-line CSS 样式应用到组件，这也被 MUI 使用。

例如，这里是 emotion 的 css 道具，用于在 div 上自定义 background-color 和 hover。您在 css 属性中编写的代码可以是纯 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>
)

有没有办法 "inject" 纯 CSS 进入 MUI v5

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

material-ui