如何在react-markdown中为元素添加样式？
如何在react-markdown中为元素添加样式？
提问于 2021-02-25 01:58:14
我在react markdown sich中传递了各种数量的数据，如表格、列表和h标签。我想知道如何分别设置每个元素的样式。我到处搜索，但除了粗体或强调等，没有提到如何设置元素的样式。我想我可以在ReactMarkdown组件中传递一个类名来设置它的样式，但这不仅仅是为该组件提供样式。我怎么样式化它里面的各种元素呢？
const ReadMePreviewer = ({ readMeCode }) => {
return (
);
};
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-27 17:02:10
这就是我让它为我工作的方式。我用CSS而不是SCSS或CSS-in-JS显式地做这件事，这样就不会用额外的库或webpack/babel微调来打扰你：
创建一个单独的markdown-styles.module.cssCSS-module文件与您的样式，例如，
.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 (
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66356329
复制相关文章
相似问题
腾讯云开发者
