Изолированные стили

MDX позволяет комбинировать возможности Markdown и JSX, что открывает широкие возможности для организации контента и компонентов с их собственными стилями. Важная задача при работе с MDX — обеспечение изоляции стилей, чтобы CSS отдельных компонентов не конфликтовал с глобальными стилями страницы.

Scoped CSS и CSS Modules

Для изоляции стилей компонентов в MDX часто используют CSS Modules. Суть подхода заключается в том, что классы стилей автоматически локализуются к компоненту:

/* Button.module.css */
.button {
  background-color: #0070f3;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
// Button.jsx
import styles from './Button.module.css';

export default function Button({ children }) {
  return <button className={styles.button}>{children}</button>;
}

В MDX этот компонент подключается как обычный JSX:

import Button from './Button.jsx';

<Button>Нажми меня</Button>

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

Inline styles и CSS-in-JS

Другой способ изоляции — использование inline styles или библиотек CSS-in-JS (например, styled-components или @emotion/react). Пример с styled-components:

import styled from 'styled-components';

const Button = styled.button`
  background-color: #ff6347;
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 5px;
  border: none;
  cursor: pointer;
`;

export default Button;

Использование в MDX:

import Button from './Button.jsx';

<Button>Кнопка с изолированным стилем</Button>

Преимущества подхода CSS-in-JS:

  • Стили полностью локализованы к компоненту.
  • Возможность динамически менять стили через props.
  • Автоматическое управление уникальными классами.

Scoped styles через MDX pragma

MDX поддерживает специальные pragma и встроенные стили через jsx блоки:

<style jsx>{`
  h1 {
    color: #2c3e50;
    font-size: 2rem;
  }

  p {
    line-height: 1.6;
    margin-bottom: 1rem;
  }
`}</style>

# Заголовок

Параграф с локальными стилями

В этом примере CSS применяется только к компонентам внутри MDX файла, предотвращая конфликт с глобальными стилями.

Комбинирование глобальных и локальных стилей

MDX позволяет использовать глобальные стили для общего оформления и локальные для отдельных компонентов. Например:

/* globals.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
}
// Card.jsx
import styles from './Card.module.css';

export default function Card({ title, children }) {
  return (
    <div className={styles.card}>
      <h2>{title}</h2>
      <div>{children}</div>
    </div>
  );
}
import Card from './Card.jsx';
import './globals.css';

<Card title="Пример карточки">
  Контент карточки с локальными стилями
</Card>

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

Особенности применения с библиотеками UI

Если в проекте используются UI-библиотеки вроде Material UI или Chakra UI, изоляция стилей в MDX особенно важна. Можно применять подход CSS Modules или стилизованные компоненты, не полагаясь на глобальные theme overrides.

Пример с Chakra UI:

import { Box, Button } from '@chakra-ui/react';

export default function AlertCard() {
  return (
    <Box bg="teal.500" p={4} borderRadius="md">
      <Button colorScheme="orange">Действие</Button>
    </Box>
  );
}

В MDX этот компонент будет полностью автономен, при этом глобальные темы Chakra не нарушаются.

Динамическая загрузка стилей

MDX позволяет использовать динамический импорт для стилей:

import { useEffect } from 'react';

export default function DynamicStyledComponent() {
  useEffect(() => {
    import('./Dynamic.module.css');
  }, []);

  return <div className="dynamic">Контент с динамическим стилем</div>;
}

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

Советы по поддержанию изоляции

  • Всегда использовать уникальные имена классов или CSS Modules.
  • Для глобальных CSS применять явные селекторы, ограничивая область действия.
  • При использовании styled-components или других CSS-in-JS библиотек следить за генерацией уникальных className.
  • Включать линтеры и инструменты проверки конфликтов CSS для крупных MDX-проектов.

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

Оглавление