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/* 导入之前，在索引根目录中导入该文件。

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>

注意事项

必须在导入任何 Material UI 组件之前调用 ClassNameGenerator.configure。

您应该始终使用 [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 />);