如何在react-markdown中为元素添加样式？

Question

我在react markdown sich中传递了各种数量的数据，如表格、列表和h标签。我想知道如何分别设置每个元素的样式。我到处搜索，但除了粗体或强调等，没有提到如何设置元素的样式。我想我可以在ReactMarkdown组件中传递一个类名来设置它的样式，但这不仅仅是为组件提供样式。我怎么样式化它里面的各种元素呢？

​

const ReadMePreviewer = ({ readMeCode }) => {
  return (
    <ReactMarkdown
      plugins={[[gfm, { singleTilde: false }]]}
      className={style.reactMarkDown}
      // className={style.reactMarkDownRemovingExtraGlobal}
      renderers={renderers}
      source={readMeCode}
    />
  );
};

​

Answer 1

这就是我让它为我工作的方式。我用CSS而不是SCSS或CSS-in-JS显式地做了这件事，这样就不会因为额外的库或webpack/巴别塔的微调而打扰你：

使用您的样式创建一个单独的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}
    />
  );
};