如何通过Material UI v5主题创建自定义CSS类

方案1：使用makeStyles生成可动态读取主题的类名字符串（推荐，样式隔离性好） #

@mui/styles提供的makeStyles是该场景下最简便的方案，调用后可以直接拿到生成的类名字符串，直接传入react-d3-tree的API即可，样式会自动复用项目全局的MUI主题配置。

1. 先安装依赖（如果项目未安装）：

   npm install @mui/styles
   # 或
   yarn add @mui/styles
   

2. 定义样式并使用：

   import { makeStyles } from '@mui/styles';
   import Tree from 'react-d3-tree';
   
   // 入参即为你项目全局的MUI主题对象，可直接读取所有主题变量
   const useTreePathStyles = makeStyles((theme) => ({
     linkPath: {
       stroke: theme.palette.primary.main,
       strokeWidth: 2,
       opacity: 0.8,
       transition: theme.transitions.create(['stroke', 'opacity']),
       '&:hover': {
         stroke: theme.palette.secondary.main,
         opacity: 1
       }
     }
   }));
   
   function CustomTree() {
     const classes = useTreePathStyles();
     // 将生成的类名传入react-d3-tree对应API即可，此处pathClassname为示例API字段，以你使用的库版本实际字段为准
     return <Tree 
       data={yourTreeData} 
       pathClassname={classes.linkPath}
     />;
   }
   

方案2：使用GlobalStyles定义完全静态的自定义类名 #

如果你需要完全控制类名的文本（比如需要固定类名给其他逻辑使用），可以用MUI内置的GlobalStyles组件，自定义静态类名同时支持读取主题变量。

import { GlobalStyles, useTheme } from '@mui/material';
import Tree from 'react-d3-tree';

function CustomTree() {
  const theme = useTheme();
  return (
    <>
      {/* 直接定义你需要的静态类名，所有样式都可读取当前主题变量 */}
      <GlobalStyles styles={{
        '.custom-tree-link': {
          stroke: theme.palette.grey[500],
          strokeWidth: 1.5,
          strokeDasharray: '3 2'
        }
      }} />
      {/* 直接传入你定义的静态类名字符串即可 */}
      <Tree 
        data={yourTreeData}
        pathClassname="custom-tree-link"
      />
    </>
  );
}

两种方案都默认复用你应用外层ThemeProvider提供的全局主题，和其他MUI组件的主题配置完全一致，不需要额外单独维护主题变量。

内容的提问来源于stack exchange，提问作者basse