Как мне встроить глобальные компоненты React в Docusaurus v2?

Question

Я вижу, что можно встраивать компоненты React с MDX:
https://v2.docusaurus.io/docs/markdown-features/

Однако этот метод работает для конкретной страницы. Как я могу заставить его работать для всех файлов уценки в документации? Я пытаюсь добавить аналогичный компонент, как в приведенной выше ссылке, чтобы изменить стиль некоторого встроенного текста. Я пытался отредактировать src / pages / index.js, но это не сработало.

const HighlightGreen = (children) => (
  <span
    style={{
      backgroundColor: '#00a400', // green,
      borderRadius: '2px',
      color: '#fff',
      padding: '0.2rem',
    }}>
    {children}
  </span>
);

Answer 1

Однако этот метод работает для конкретной страницы.

В документации есть пример, где можно создать файл для компонента:

      // src/components/Highlight.js
import React from 'react';

export default function Highlight({children, color}) {
  return (
    <span
      style={{
        backgroundColor: color,
        borderRadius: '2px',
        color: '#fff',
        padding: '0.2rem',
      }}>
      {children}
    </span>
  );
}

Его можно использовать на любой странице, но вам следует добавить ссылку:

      import Highlight from '@site/src/components/Highlight';

<Highlight color="#25c2a0">Docusaurus green</Highlight>

Таким образом, вы можете определить компонент один раз в файле и использовать его.

---

Если вы имеете в виду, что хотите опуститьimportоператор и использовать компонент с неявным импортом, тогда единственный способ сделать это в теме. В документации говорится:

Если вы хотите зарегистрировать дополнительные имена тегов (например, тег выше), вам следует рассмотреть возможность переноса @theme/MDXComponents, чтобы вам не приходилось поддерживать все существующие сопоставления. Поскольку интерфейс командной строки swizzle пока не позволяет обертывать некомпонентные файлы, вам следует создать оболочку вручную:

      import React from 'react';
// Import the original mapper
import MDXComponents from '@theme-original/MDXComponents';
import Highlight from '@site/src/components/Highlight';

export default {
  // Re-use the default mapping
  ...MDXComponents,
  // Map the "<Highlight>" tag to our Highlight component
  // `Highlight` will receive all props that were passed to `<Highlight>` in MDX
  Highlight,
};

@brendangibson предоставляет команды для создания темы.

Answer 2

Кажется, теперь вы можете "переключить" корневой компонент, создав website/src/theme/Root.jsфайл, согласно: https://docusaurus.io/docs/using-themes#wrapper-your-site-with-root

Answer 3

yarn swizzle @docusaurus/theme-classic MDXComponents --danger

В src/theme/MDXComponents/index.js:

      import {MyComponent} from "/src/components/MyComponent";
...
const MDXComponents = {
    MyComponent,
    ...