我们的应用程序是使用 Material-UI 库(带主题)构建的。作为此应用程序的一部分,我们将 markdown 解析为 html(标记库)。
如何将material-ui主题(Typography)应用到纯html?
不知何故
<div dangerouslySetInnerHTML={ {__html: marked(markdown code)}}/>
应具有由material-ui Typography 定义的样式
所有
Typography
变体的样式位于 theme.typography.<variant>
的主题中(您可以在此处浏览默认主题中的这些条目:https://material-ui.com/customization/default-theme/#default-主题)。您可以利用它来创建样式来定位您想要支持的标签,如下例所示:
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>
);
}
markdown-to-jsx
npm 包。 这里是来自材料UI模板的示例。
你基本上必须创建一个ReactMarkdown喜欢的配置对象,它是特定于material 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} />;
}
我直接从他们的例子中得到了这一点。