Material-UI 样式和 html/markdown答案

【问题标题】：Material-UI styles and html / markdownMaterial-UI 样式和 html/markdown
【发布时间】：2021-05-07 17:36:58
【问题描述】：

我们的应用程序是使用 Material-UI 库（带有主题）构建的。作为此应用程序的一部分，我们将 Markdown 解析为 html (marked library)。

如何将 material-ui 主题（排版）应用到纯 html 中？

不知何故

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

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

【问题讨论】：

你有什么理由选择marked而不是更容易支持这个的特定于反应的库吗？
@JacobSmit ，没有理由。但我不想要一个添加大量反应节点的库，因为内容是“静态的”。
很公平。作为一件有趣的事，Material UI 的一位联合创始人之前回答了一个关于降价和排版的问题，并链接到一个他们如何（或至少是）处理文档网站降价的示例。 github.com/mui-org/material-ui/issues/…
@JacobSmit，这有帮助。谢谢。看起来这是一个“手动”工作

标签： reactjs material-ui javascript-marked

【解决方案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>
  );
}

【讨论】：

【解决方案2】：

使用常规的Typography 组件并以与在问题中传递类似的方式传递该 HTML。

<Typography
    variant="h2"
    color="primary"
    dangerouslySetInnerHTML={{ __html: "<p>Hi from inner HTML</p>" }}>
    
</Typography>

这里有个问题，当 dangerouslySetInnerHTML 被传递时，不要将任何东西作为孩子传递。

这是一个工作演示：

注意：还要确保函数marked(markdown code) 以字符串形式返回HTML。

【讨论】：

这可能适用于单个标签，但不适用于多个标签 (h1,h2.. ) -> codesandbox.io/s/dazzling-wildflower-p6dvq .. 检查样式是如何生成的。
我猜它正在工作，因为 h2 变体的颜色和字体系列正在被应用。您认为这在哪一部分不起作用？
是不是 fontSize 的大小？
你希望 h1 中的 html 使用变体 h1，h3 中的 html 使用变体 h3.. 事实并非如此。

【解决方案3】：

使用markdown-to-jsx npm 包。 here 是材质 ui 模板中的示例。

你基本上必须创建一个 ReactMarkdown 喜欢的配置对象，这是特定于材质 ui 的

import React from 'react';
import ReactMarkdown from 'markdown-to-jsx';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Link from '@material-ui/core/Link';

const styles = (theme) => ({
  listItem: {
    marginTop: theme.spacing(1),
  },
});

const options = {
  overrides: {
    h1: {
      component: Typography,
      props: {
        gutterBottom: true,
        variant: 'h5',
      },
    },
    h2: { component: Typography, props: { gutterBottom: true, variant: 'h6' } },
    h3: { component: Typography, props: { gutterBottom: true, variant: 'subtitle1' } },
    h4: {
      component: Typography,
      props: { gutterBottom: true, variant: 'caption', paragraph: true },
    },
    p: { component: Typography, props: { paragraph: true } },
    a: { component: Link },
    li: {
      component: withStyles(styles)(({ classes, ...props }) => (
        <li className={classes.listItem}>
          <Typography component="span" {...props} />
        </li>
      )),
    },
  },
};

export default function Markdown(props) {
  return <ReactMarkdown options={options} {...props} />;
}

我直接从他们的例子中得到了这一点。

【讨论】：