有什么方法可以用Material的createTheme来瞄准类？

Question

我知道MUI的createTheme的基础知识和更改组件默认值(如排版)的基础知识，但是如何选择classNames呢？在我的情况下，我只想为特定的排版/网格和断点一起创建主题，但是没有明确的例子来改变文档中的目标组件。到目前为止，我的情况如下：

  let theme = createTheme({
    typography: {
      fontFamily: "Inter, sans-serif",
      color: "#212b37",
      h5: {
        fontSize: 40,
      },
      body: {
        fontSize: 18,
      },
    },
    root: {
        sample_class: {
            fontSize: 40,
        }
    }
  });

我看到了提到root的文档，所以我只是对它进行了扩展，并添加了sample_class思想，它将选择具有相同className的元素。

Answer 1

仅供参考，我使用的是MUI版本^5.0.0-rc.1。

也许您可以在createTheme中尝试这样的方法：

解决方案1：

MuiTypography: {
  styleOverrides: {
    h6: ({ ownerState }) => (ownerState.className === "MyClass" ? { color: "red" } : {}),
  },
},

其中"MyClass“是要应用主题样式的类的名称。

解决方案2：

这更干净。

MuiTypography: {
  styleOverrides: {
    h6: {
      '&.MyClass': { color: 'red' },
    },
  },
},

然后，您可以使用您的排版元素来完成此操作：

<Typography variant="h6" className="MyClass">Hello world</Typography>

如果您有VS代码，您可以使用Command+Click，直到您到达TypographyClasses接口，该接口为您提供了要覆盖的排版类的完整列表。

下面是一些ownerState的链接，这些链接可以帮助组件重写：

• https://mui.com/customization/theme-components/
• https://mui.com/customization/unstyled-components/

这也是我尝试为另一个组件(如MuiAccordion )设置样式的解决方案，但我不想覆盖现有的变体，因为它们有自己的默认样式。