自定义主题的 MUI 主题化问题答案

【问题标题】：MUI theming trouble with custom theme自定义主题的 MUI 主题化问题
【发布时间】：2023-01-28 00:56:45
【问题描述】：

我如何在创建主题中创建自己的属性名称，例如文本 Dark、lightING 等的颜色？ Vscode 说它不能真正用未知属性调用，但也许我可以以某种方式做到这一点

我没有找到相关信息

【问题讨论】：

您绝对可以随意命名属性。 vscode 错误必须与其他内容有关

标签： reactjs typescript material-ui frontend

【解决方案1】：

下面是一个示例，说明如何使用您自己的颜色属性名称创建自定义主题：

import { createMuiTheme } from '@material-ui/core/styles';

const myTheme = createMuiTheme({
   palette: {
    textDark: '#000000',
    lightBg: '#F5F5F5',
    // Add additional colors here
 },
 typography: {
   // Customize typography here
 },
});

然后，您需要将您的应用程序包装在 ThemeProvider 组件中，并将自定义主题作为道具传递给它。

import { ThemeProvider } from '@material-ui/core/styles';

function App() {
  return (
    <ThemeProvider theme={myTheme}>
      <YourApp />
    </ThemeProvider>
  );
}

您可以使用 Material-UI 提供的 makeStyles 挂钩在您的组件中使用这些自定义颜色。

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  myCustomClass: {
    color: theme.palette.textDark,
    backgroundColor: theme.palette.lightBg
  },
  // Add additional classes here
}));

您还可以将此自定义属性名称与其他 Material-UI 组件（例如 Button 组件）一起使用，方法是将自定义属性名称作为 color 属性的值传递。

<Button color="textDark" variant="contained">Dark Text</Button>

希望这可能有所帮助。

【讨论】：