reactjs - Material-UI 样式和 html/markdown

Question

我们的应用程序是使用 Material-UI 库(带主题)构建的。作为此应用程序的一部分，我们将 Markdown 解析为 html ( marked library )。
如何将 material-ui 主题(Typography)应用到纯 html 中？
不知何故

<div dangerouslySetInnerHTML={ {__html: marked(markdown code)}}/>

应该具有 material-ui Typography 定义的样式

Answer 1

所有 Typography 的样式变体在 theme.typography.<variant> 的主题中(您可以在此处浏览默认主题中的这些条目: https://material-ui.com/customization/default-theme/#default-theme )。您可以利用它来创建样式以定位您想要支持的标签，如下例所示:

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

const useStyles = makeStyles((theme) => {
  const tags = ["h1", "h2", "h3", "h4", "h5", "h6"];
  const nestedRules = {};
  tags.forEach((tag) => {
    nestedRules[`& ${tag}`] = { ...theme.typography[tag] };
  });
  return {
    root: nestedRules
  };
});

export default function App() {
  const classes = useStyles();
  return (
    <Typography
      className={classes.root}
      variant="body1"
      dangerouslySetInnerHTML={{
        __html:
          "<h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6><p>default body1</p>"
      }}
    ></Typography>
  );
}

相关答案: material-ui makeStyles: how to style by tag name?