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

Question

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

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

Answer 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>
  </>
);