ClassName 產生器

在建置時設定類別名稱產生。

此 API 在 @mui/material (v5.0.5) 中引入，作為已棄用的 createGenerateClassName 的替代方案。

設定

預設情況下，Material UI 會為每個元件插槽產生一個全域類別名稱。例如，<Button>Text</Button> 會產生如下 HTML：

<button
  class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root css-1ujsas3"
>
  Text
</button>

若要自訂 Material UI 元件產生的所有類別名稱，請建立一個獨立的 JavaScript 檔案來使用 ClassNameGenerator API。

// create a new file called `MuiClassNameSetup.js` at the root or src folder.
import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';

ClassNameGenerator.configure(
  // Do something with the componentName
  (componentName) => componentName,
);

然後在任何 @mui/* 匯入之前，將該檔案匯入到 index 的根目錄。

import './MuiClassNameSetup';
import Button from '@mui/material/Button';
// ...other component imports

function App() {
  return <Button>Text</Button>;
}

以下是一些設定範例

變更類別名稱前綴

// MuiClassNameSetup.js
import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';

ClassNameGenerator.configure((componentName) => `foo-bar-${componentName}`);

結果，HTML 結果變更如下：

<button
  class="foo-bar-MuiButton-root foo-bar-MuiButton-text foo-bar-MuiButton-textPrimary foo-bar-MuiButton-sizeMedium foo-bar-MuiButton-textSizeMedium foo-bar-MuiButtonBase-root css-1ujsas3"
>
  Button
</button>

重新命名元件類別名稱

每個 Material UI 元件都有 ${componentName}-${slot} 類別名稱格式。例如， Chip 的元件名稱是 MuiChip，它被用作每個 <Chip /> 元素的全域類別名稱。您可以如下移除/變更 Mui 前綴

// MuiClassNameSetup.js
import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';

ClassNameGenerator.configure((componentName) => componentName.replace('Mui', ''));

現在，Mui 類別已移除。

<div
  class="Chip-root Chip-filled Chip-sizeMedium Chip-colorDefault Chip-filledDefault css-mttbc0"
>
  Chip
</div>

注意事項

ClassNameGenerator.configure 必須在任何 Material UI 元件匯入之前呼叫。

您應始終使用 [component]Classes 進行主題/自訂，以取得正確產生的類別名稱。

+import { outlinedInputClasses } from '@mui/material/OutlinedInput';

 const theme = createTheme({
   components: {
     MuiOutlinedInput: {
       styleOverrides: {
         root: {
-          '& .MuiOutlinedInput-notchedOutline': {
+          // the result will contain the prefix.
+          [`& .${outlinedInputClasses.notchedOutline}`]: {
             borderWidth: 1,
           }
         }
       }
     }
   }
 });

此 API 應僅在建置時使用。
設定會應用於整個應用程式中的所有元件。您無法針對應用程式的特定部分。

框架範例

始終建立一個初始化檔案，將 ClassNameGenerator 呼叫提升到最頂層。

// create a new file called `MuiClassNameSetup.js` at the root or src folder.
import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';

ClassNameGenerator.configure(
  // Do something with the componentName
  (componentName) => componentName,
);

然後根據框架，在主要的 JavaScript 原始碼中匯入該檔案。

Next.js Pages Router

在 /pages/_app.js 中匯入初始化檔案。

+import './MuiClassNameSetup';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Head from 'next/head';

 export default function MyApp(props) {
   const { Component, pageProps } = props;

   return (
     <Component {...pageProps} />
   );
 }

Create React App

在 /src/index.js 中匯入初始化檔案。

+import './MuiClassNameSetup';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import App from './App';

 ReactDOM.render(<App />);