使用 .css 文件操作 Material-UI

Question

有沒有辦法用 CSS 表自定義 Material-UI 元素？

我的意思是，我知道 {makeStyles} 方法並使用 JSS 進行覆蓋，但它在代碼中看起來很糟糕，並且在其他存檔上對其進行模塊化會令人困惑，我想知道是否有任何解決方法可以將它們放在一個 css 存檔中各種各樣的。

Answer 1

大聲笑，我只需要一些更具體的 Google-fu

我是這樣解決的：

import React from 'react';
import ReactDOM from 'react-dom';
import { StylesProvider } from "@material-ui/styles";
import App from './App';
import './GlobalCSS.css'

ReactDOM.render(
  <React.StrictMode>
    <StylesProvider injectFirst>
      <App />
    </StylesProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

關鍵是在 index.js 的標簽內添加標簽，並在同一個文件中指向你的 css，現在你可以使用預定義的類名或覆蓋你的類名。

Answer 2

您可以將makeStyles代碼放在單獨的 JS 文件中。 您通常會將它返回的對象存儲在名為useStyles （這是您導出的）的鈎子中，然后您可以在相關組件中使用該鈎子。

但是，如果您必須使用原始 CSS 來自定義您的 MUI 組件並優先考慮這些自定義 CSS，您可以選擇重新排序 MUI 樣式表的注入位置

StylesProvider 組件有一個 injectFirst 道具來首先在頭部注入樣式標簽（優先級較低）

 import { StylesProvider } from '@material-ui/core/styles'; <StylesProvider injectFirst> {/* Your component tree. */} </StylesProvider>