Next.js中CSS模块类名不生效，应如何设置className？

• CSS Modules会对类名进行哈希重命名，对于包含连字符的类名（如.markdown-body），无法直接通过驼峰或下划线形式的属性访问，必须使用方括号语法直接调用原类名。
• 正确的className设置方式：

  className={styles['markdown-body']}
  

• 完整使用示例：

  import ReactMarkdown from 'react-markdown';
  import remarkGfm from 'remark-gfm';
  import styles from './content.module.css';
  
  export default function PostContent({ markdown }) {
    return (
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        className={styles['markdown-body']}
      >
        {markdown}
      </ReactMarkdown>
    );
  }
  

• 确认你的content.module.css中类名定义正确：

  .markdown-body {
    /* 自定义样式规则 */
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    line-height: 1.8;
  }
  

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