如何覆盖toolpad-mui标题的颜色

Question

我是 UI 开发新手，正在尝试使用 React/ui/javascript。我正在开发一个仪表板并使用 MUI Toolpad。

MUI 工具板采用的默认颜色是原色，但我想用其他颜色覆盖。我检查了 theming 选项，但我不清楚如何指定覆盖默认颜色的 cssVariables。 我在 json 文件中使用自定义主题并应用该主题，但它并没有覆盖颜色。 -

"typography": {
    "fontFamily": "\"Droid Sans\", \"Helvetica\", \"Arial\", sans-serif",
    "allVariants": {
      "color": "#212121"
    }
},

任何人都可以提供一个例子吗？

Answer 1

您可以通过简单地提供 Typography 标签来更改标题主题，您可以在其中使用样式编写标题，我使用的是 tailwind CSS，您也可以使用 style 属性。

import { Typography } from "@mui/material";
import { AppProvider } from "@toolpad/core/react-router-dom";

<AppProvider
      branding={{
        title: (
          <Typography variant="h6" className="!font-bold font-sans">
            Your Title
          </Typography>
        ),
        logo: <img src="/logo.png" alt="logo" />,
      }}
>
</AppProvider>