Как добавить стили для элементов в React-Markdown?

Question

Я передаю различные объемы данных в React Markdown sich в виде таблиц, списков и тегов h. Я хотел знать, как стилизовать каждый элемент отдельно. Я искал везде, но нет упоминания о том, как стилизовать элементы, кроме жирного шрифта или выделения и т. Д. Я подумал, что могу передать имя класса в компоненте ReactMarkdown, чтобы стилизовать его, но это не просто обеспечит стиль только для компонента. Как мне стилизовать различные элементы внутри него?

Answer 1

Вот как я заставлю это работать на меня. Я делаю это явно с помощью 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}
    />
  );
};

Answer 2

Кажется, это работает, чтобы обернуть into new line

App.css

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

Составная часть:

<ReactMarkdown className="markdown">{page.Content}</ReactMarkdown>

Answer 3

ReactMarkdown (без CSS) визуализируется как элементы P, поэтому, если вы обертываете <ReactMarkdown в Div с помощью CSS и оставляете <ReactMarkdown без имени класса, вы можете использовать Div для установки стиля элементов P:

      .markdown p {
  display: inline !important;
  border: 1px solid red;
}

ПЛОХОЙ:

       <div className="markdown">
  <b>Description:</b>
  <ReactMarkdown className="markdown" children={result.Description} rehypePlugins={[rehypeRaw]} />
  </div>

ХОРОШИЙ:

       <div className="markdown">
  <b>Description:</b>
  <ReactMarkdown children={result.Description} rehypePlugins={[rehypeRaw]} />
  </div>