CSS и MDX

MDX позволяет использовать компоненты React внутри Markdown, что открывает гибкость для работы с CSS. Для подключения стилей можно использовать как глобальные CSS-файлы, так и CSS-модули.

Глобальные CSS-файлы

Для глобальных стилей достаточно импортировать CSS в верхнем уровне приложения или непосредственно в MDX-файл:

import './styles/global.css';

Все классы и селекторы из global.css будут доступны в любом компоненте, используемом в MDX. Это удобно для единообразного оформления, но следует учитывать риск конфликтов имен.

CSS-модули

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

import styles from './Button.module.css';

export const Button = () => (
  <button className={styles.primaryButton}>
    Нажми меня
  </button>
);

В MDX можно прямо использовать этот компонент:

<Button />

Каждое имя класса в модуле автоматически преобразуется в уникальный идентификатор, что делает код безопасным для крупных проектов.

Inline-стили в MDX

MDX поддерживает стандартные React-стили через объект style. Это полезно для быстрого прототипирования или динамических стилей:

<div style={{ backgroundColor: 'lightblue', padding: '20px' }}>
  Контент с инлайн-стилями
</div>

Однако такой подход не подходит для сложной стилизации и масштабных проектов, так как inline-стили не поддерживают медиазапросы и псевдоклассы.

Стилизация компонентов с использованием Styled Components

MDX легко интегрируется с CSS-in-JS библиотеками, например, styled-components:

import styled from 'styled-components';

const Highlight = styled.span`
  color: red;
  font-weight: bold;
`;

export const Note = () => <Highlight>Важная заметка</Highlight>;

В MDX это можно использовать следующим образом:

<Note />

Преимущество CSS-in-JS — возможность динамически менять стили через пропсы и темы.

Работа с темами и CSS-переменными

MDX позволяет применять темы через контекст React и CSS-переменные. Пример использования темы:

const theme = {
  primary: 'blue',
  secondary: 'gray',
};

export const ThemedBox = ({ children }) => (
  <div style={{ backgroundColor: theme.primary, color: theme.secondary }}>
    {children}
  </div>
);

Это позволяет унифицировать цветовую палитру и стили через весь MDX-контент.

Стилизация Markdown-элементов

MDX даёт возможность переопределять стандартные Markdown-теги через компонентный маппинг:

import { MDXProvider } from '@mdx-js/react';

const components = {
  h1: (props) => <h1 style={{ color: 'darkgreen' }} {...props} />,
  p: (props) => <p style={{ fontSize: '18px' }} {...props} />,
};

<MDXProvider components={components}>
  <YourMDXContent />
</MDXProvider>

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

Анимации и взаимодействие со стилями

MDX позволяет подключать библиотеки анимаций, такие как framer-motion или react-spring, для динамического изменения стилей:

import { motion } from 'framer-motion';

export const AnimatedBox = () => (
  <motion.div
    animate={{ scale: 1.2 }}
    transition={{ duration: 0.5 }}
    style={{ backgroundColor: 'pink', padding: '20px' }}
  >
    Анимированный блок
  </motion.div>
);

MDX обеспечивает возможность использования таких компонентов прямо в Markdown, что облегчает создание интерактивных и визуально привлекательных страниц.

Практика использования SCSS с MDX

MDX также поддерживает препроцессоры CSS, например, SCSS. Для этого требуется настроить сборщик (Webpack или Vite) и импортировать SCSS-файл:

import './styles/main.scss';

С помощью SCSS можно использовать вложенность, миксины и переменные, что значительно упрощает организацию стилей для сложных MDX-документов.

Оптимизация стилей для MDX

  • Локальные CSS-модули предпочтительнее для крупных проектов, так как они предотвращают конфликты имен.
  • MDXProvider позволяет централизованно переопределять стили Markdown-элементов.
  • CSS-in-JS удобен для динамических стилей и интеграции с темами.
  • SCSS подходит для сложной иерархии стилей и повторного использования кода.

Использование этих подходов в комбинации позволяет создавать масштабируемые и поддерживаемые проекты на MDX с профессиональной системой стилей.

Оглавление