使用 CSS 设置 Material UI 组件的样式

Question

我有一个 Material UI 组件，我正在尝试使用 CSS 自定义它的样式。

以下是代码：

<IconButton className="my-class">
    <Close />
</IconButton>

CSS：

.my-class {
  float: right;
  margin-left: auto;
  margin-right: 0;
}

但是我无法设置它的样式，当我尝试以下操作时，它有效：

<IconButton style={{ float: 'right', marginLeft: 'auto', marginRight: '0' }}> 
    <Close />
</IconButton>

为什么我无法使用常规 CSS 设置 Material UI 组件的样式？

Answer 1

大多数 CSS-in-JS 解决方案将其样式注入 HTML

<head>

的底部，这使得 MUI 优先于您的自定义样式。您需要使用从

StyledEngineProvider

导出的

@mui/material/styles

和

injectFirst

选项，以使 CSS 注入顺序正确。这里有解释。

所以像这样的东西应该有效：

<StyledEngineProvider injectFirst>
    <IconButton className="my-class">
      <CloseIcon></CloseIcon>
    </IconButton>
</StyledEngineProvider>

Answer 2

您可以使用多种方式设置 MUI 组件的样式，例如 GlobalStyles API、sx、styled 甚至普通方式。

如果您要设计 IconButton 等特定组件的样式，并且查看 API 的文档，您可以找到该组件的类名称。

Answer 3

在 mui 中使用“sx”代替“styles” 使用 sx 属性代替 styles