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

【问题标题】：How to add styling for elements in react-markdown?如何在 react-markdown 中为元素添加样式？
【发布时间】：2021-05-27 02:14:46
【问题描述】：

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

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

【问题讨论】：

标签： html css reactjs react-markdown

【解决方案1】：

这就是我如何让它为我工作。我用 CSS 明确地做到这一点，而不是，例如，SCSS 或 CSS-in-JS，以免用额外的库或 webpack/babel 微调来打扰你：

使用您的样式创建一个单独的markdown-styles.module.css CSS-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 (
    <ReactMarkdown
      plugins={[[gfm, { singleTilde: false }]]}
      className={style.reactMarkDown}
      renderers={renderers}
      children={readMeCode}
    />
  );
};

【讨论】：

【解决方案2】：

这似乎可以包装 into new line

App.css

.markdown code {
  display: block;
  white-space: pre-wrap;
}

组件：

{page.Content}

【讨论】：