使用 MUI 字体的 React 组件库

Question

我制作了一个小型 React 组件库，但问题是我使用的是 Material UI。 Material UI 使用的是 Roboto 字体，它必须链接到 HTML 头部。

如何导出包含 Roboto 字体的每个 React 组件？

谢谢！

Answer 1

您可以在任何组件（如模块）中导入 Roboto

https://www.npmjs.com/package/@fontsource/roboto

import "@fontsource/roboto"; // Defaults to weight 400.

还可以在此处查看官方 Material UI 文档https://mui.com/material-ui/react-typography/#install-with-npm

Answer 2

正如我在上面的最后一条评论中所述

我想将所有文本包装在您的自定义组件中是“提供”字体系列的唯一方法：Roboto; css 样式给元素及其后代。 解决方法可能是 <Box style={{fontFamily: "Roboto"}} 或包装样式组件，例如使用 css 样式：font-family: Roboto

请参阅此处的示例https://codesandbox.io/s/kind-forest-x93th3?file=/src/hello.jsx