如何使用 MUI v5 主题创建自定义 CSS 类？答案

【问题标题】：How to create custom CSS classes using MUI v5 theme?如何使用 MUI v5 主题创建自定义 CSS 类？
【发布时间】：2022-01-07 10:58:39
【问题描述】：

我在我的应用程序中使用 MUI v5 以及呈现 SVG 树形图的 react-d3-tree。它提供了一种 API 以在 <path> 元素中包含自定义 CSS 类名称，从而将树节点相互链接。我想将自定义类名传递给react-d3-tree 并能够使用 MUI 的主题变量。因此仅仅导入一个.css 文件是不够的。

如何使用 MUI v5 创建静态命名的自定义 CSS 类并利用 MUI 主题定义来设置应用程序其他部分的样式？

【问题讨论】：

如果您的问题包含一个简单的代码示例，说明您希望如何使用 CSS 类以及带有该代码的 code sandbox，这将有所帮助。
我想要一个来自 MUI 的 CSS 类名称字符串传递给 SVG 元素的道具。坦率地说，我看不出一个代码示例如何使这更清楚......
代码示例（尤其是通过代码沙箱或类似方式的工作示例）可以让某人更轻松、更快捷地提供包含工作示例的明确答案。到目前为止，对我的评论的 3 次赞成可能来自如果您已经添加了这样的示例，他们会回答您的问题。
MUI 文档提到了tss-react（第三方包），它使您可以访问类似于旧的makeStyles 的功能，但使用的是 Emotion 而不是 JSS。您可以使用它来创建要传递的类名。另一种选择是使用 Emotions css 函数烘焙您自己的类似代码。

标签： css reactjs material-ui

【解决方案1】：

有https://mui.com/api/global-styles/ 组件。

用法：

return (
  <>
    <GlobalStyles
      styles={(theme) => ({
        h1: { color: theme.palette.primary.main },
        h2: { color: "green" },
        ".some-class": { backgroundColor: "lightpink" }
      })}
    />
    <h1>This is a h1 element</h1>
    <h2>This is a h2 element</h2>
    <button className="some-class">Pink</button>
  </>
);

【讨论】：