Глобальные стили

MDX объединяет возможности Markdown и JSX, предоставляя гибкость работы с компонентами в документации или приложениях на React. Одним из ключевых аспектов разработки с MDX является управление стилями, в частности — глобальными. Глобальные стили позволяют задать единый визуальный язык для всех компонентов и элементов, используемых в MDX-документации или страницах.

Подключение глобальных стилей

В отличие от локальных стилей, которые применяются к отдельным компонентам через CSS-модули или styled-components, глобальные стили оказывают влияние на все элементы документа. В MDX для этого используются стандартные подходы React:

import './global.css';

Файл global.css может содержать любые CSS-правила, которые будут автоматически применены ко всем MDX-страницам. Например:

body {
  font-family: 'Inter', sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: #333333;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

Это гарантирует единообразие заголовков, отступов и базовой типографики на всех страницах.

Использование Emotion или Styled Components для глобальных стилей

Если проект использует CSS-in-JS, глобальные стили можно объявлять через Global из @emotion/react или createGlobalStyle из styled-components. Пример с Emotion:

/** @jsxImportSource @emotion/react */
import { Global, css } from '@emotion/react';

export const GlobalStyles = () => (
  <Global
    styles={css`
      body {
        font-family: 'Roboto', sans-serif;
        background-color: #ffffff;
        color: #111111;
      }
      a {
        color: #1e90ff;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
    `}
  />
);

После этого GlobalStyles необходимо включить на уровне корневого компонента:

import { GlobalStyles } from './GlobalStyles';

export default function App({ children }) {
  return (
    <>
      <GlobalStyles />
      {children}
    </>
  );
}

Такой подход позволяет не только задавать глобальные правила, но и интегрировать их с динамическими темами и переменными JavaScript.

Селекторы и специфичность

При работе с MDX важно учитывать, что документ может содержать как HTML-элементы Markdown (p, ul, h1), так и кастомные React-компоненты. Для глобальных стилей:

  • Прямое обращение к HTML-тегам гарантирует, что базовые элементы документа будут стилизованы.
  • Для компонентов рекомендуется использовать селекторы по имени компонента или классу, чтобы избежать конфликта с локальными стилями.

Пример:

.MDXButton {
  background-color: #ff4500;
  color: #ffffff;
  border-radius: 4px;
  padding: 0.5rem 1rem;
}

Если компонент MDXButton используется во многих местах, это правило применится ко всем его экземплярам.

Интеграция с темами

Глобальные стили в MDX часто интегрируют с системами темизации. Например, с использованием CSS-переменных можно создать динамическую тему:

:root {
  --primary-color: #1e90ff;
  --background-color: #ffffff;
  --text-color: #333333;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

a {
  color: var(--primary-color);
}

Переключение темы сводится к изменению значений переменных на корневом уровне:

document.documentElement.style.setProperty('--primary-color', '#ff6347');

Ограничения и рекомендации

  • Изоляция компонентов: глобальные стили могут конфликтовать с локальными стилями, поэтому следует использовать их только для базовой типографики, цветовой схемы и общих правил элементов.
  • Производительность: большое количество глобальных CSS-правил может замедлить рендеринг страниц MDX, особенно если применяются сложные селекторы.
  • Согласованность: рекомендуется держать глобальные стили в отдельном файле или компоненте для упрощения поддержки и переиспользования.

Глобальные стили являются фундаментом визуальной согласованности MDX-документации. Правильная организация CSS и интеграция с темами обеспечивает единый внешний вид, удобство масштабирования и гибкость при работе с компонентами и Markdown-элементами.

Оглавление