使用 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>的底部注入它們的 styles，這使 MUI 優先於您的自定義 styles。您需要使用從@mui/material/styles導出的StyledEngineProvider和injectFirst選項，以便CSS 注入順序是正確的。 在這里解釋。

所以像這樣的東西應該起作用：

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

Answer 2

您可以使用多種方式設置 MUI 組件的樣式，例如GlobalStyles API 、 sx 、樣式化甚至正常方式。

如果您要為 IconButton 等特定組件設置樣式，並且查看 API 的文檔，您可以找到該組件的 class 名稱。

這里有幾個參考。https://mui.com/customization/how-to-customize/#main-content

如何為 MUI TextField 提供條件樣式？

使用 CSS 對 Material UI 組件進行樣式化

問題描述

2 個解決方案

解決方案1
3 2022-03-08 09:34:18

解決方案2
0 2022-03-08 13:44:20

使用 CSS 對 Material UI 組件進行樣式化

問題描述

2 個解決方案

解決方案1 3 2022-03-08 09:34:18

解決方案2 0 2022-03-08 13:44:20

解決方案1
3 2022-03-08 09:34:18

解決方案2
0 2022-03-08 13:44:20