咨询：能否在MDX文档中嵌入CSS类样式？

当然可以在MDX文档里嵌入CSS类样式，几种实用的实现方式如下：

• 直接给元素添加类名
  在MDX里直接给HTML元素或React组件加上className属性，再通过全局CSS文件或者项目里的样式方案来定义类的样式：

  <div className="custom-container">
    这是应用了自定义类样式的内容块
  </div>
  

• 导入CSS文件/模块化CSS
  在MDX文件顶部直接导入全局CSS，或者用CSS Modules来避免样式冲突：

  // 导入全局样式
  import './global-styles.css'
  // 导入CSS Modules
  import cardStyles from './card.module.css'
  
  <div className={cardStyles.card}>这是模块化样式的卡片</div>
  

• 结合CSS-in-JS库使用
  如果项目用了styled-components、Emotion这类CSS-in-JS库，也能在MDX里直接创建带样式的组件：

  import styled from 'styled-components'
  
  const HighlightText = styled.span`
    color: #ff4500;
    font-weight: bold;
  `
  
  这段文字里的<HighlightText>高亮部分</HighlightText>就是用CSS-in-JS实现的
  

• 内联样式（补充方案）
  要是只是简单样式，也可以直接用内联style属性，虽然不是类样式，但也算嵌入样式的一种：

  <p style={{ fontSize: '16px', lineHeight: '1.6' }}>
    这是应用了内联样式的段落
  </p>
  

内容的提问来源于stack exchange，提问作者basickarl