在外部包中使用主题提供者注入主题道具

Question

我想构建我的 react 项目，将我的自定义 @material-ui 组件链接到外部依赖项中，我正在使用汇总来实现它。构建我的外部依赖项并将其发布到 npm 上都可以正常工作。我可以在我的项目上导入，Theme provider 在外部组件上提供主题道具。

现在为了改进外部依赖项的开发过程，我将我的项目与我的外部库链接，我尝试使用yarn link，似乎组件已正确链接，但它们没有收到主题道具来设置样式组件。

下面是我的外部组件的结构示例：

import React from 'react';
import { Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
    root:{
      padding: 20,
    },
    subtitle:{
      margin:'12px 0',
      color: theme.palette.gray.dark
    }
}));

function ExampleLayout(props){
  const classes = useStyles(props);

  return(
    <div className={classes.root}>
      {props.children}
    </div>
  )
}

找不到颜色：theme.palette.gray.dark（主题未定义）（调色板和其他配置都是正确的，因为如果我构建和发布所有作品），问题是 ThemeProvider 上包含的外部组件没有收到主题道具；

有人知道是主题提供者还是其他问题吗？

你的环境？？？？ 技术版 Material-UI v4.9.8 反应 v16.9.0 浏览器 Chrome 打字稿没有 汇总 1.27.2 等等

Answer 1

例如，您可以使用theme.palette.grey['500']，或任何键：

50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700

这基本上让您可以轻松控制颜色的 HUE。

在你的代码中是：

const useStyles = makeStyles(theme => ({
    root:{
      padding: 20,
    },
    subtitle:{
      margin:'12px 0',
      color: theme.palette.grey["50"]
    }
}));

注意灰色->灰色的错字

有关 MUI 中的调色板和颜色的更多信息，您可以在此处找到：https://material-ui.com/customization/color/