如何解决如何在react-markdown中为元素添加样式?
我在 react markdown 中传递各种数据,例如表格、列表和 h 标签。我想知道如何分别设置每个元素的样式。我到处搜索,但除了粗体或强调等之外,没有提到如何设置元素的样式。我想我可以在 ReactMarkdown 组件中传递一个类名来设置它的样式,但这不仅仅是为组件提供样式。我如何为其中的各种元素设置样式?
const ReadMePreviewer = ({ readMeCode }) => {
return (
<ReactMarkdown
plugins={[[gfm,{ singleTilde: false }]]}
className={style.reactMarkDown}
// className={style.reactMarkDownRemovingExtraGlobal}
renderers={renderers}
source={readMeCode}
/>
);
};
解决方法
这就是我让它为我工作的方式。我用 CSS 而不是,例如,SCSS 或 CSS-in-JS 来做,以免用额外的库或 webpack/babel 微调来打扰你:
使用您的样式创建一个单独的 markdown-styles.module.css
CSS 模块文件,例如,
.reactMarkDown {
// some root styles here
}
.reactMarkDown ul {
margin-top: 1em;
margin-bottom: 1em;
list-style: disc outside none;
}
.reactMarkDown ul li {
margin-left: 2em;
display: list-item;
text-align: -webkit-match-parent;
}
// your other styles but all under .reactMarkDown blocks
然后您可以将其导入到您的组件中并按原样使用:
import style from './markdown-styles.module.css';
...
const ReadMePreviewer = ({ readMeCode }) => {
return (
<ReactMarkdown
plugins={[[gfm,{ singleTilde: false }]]}
className={style.reactMarkDown}
renderers={renderers}
children={readMeCode}
/>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。