Docusaurus中<ul>标签的class属性为何被移除？

成因 #

Docusaurus依赖的Remark/Rehype Markdown处理生态里，默认的列表处理逻辑会专门清空<ul>标签的class属性——目的是统一站点默认无序列表的样式，但这个逻辑没考虑到用户手动写HTML自定义class的场景。而<ol>或其他标签不在这个特殊处理范围内，所以不会出现class被清的情况；id这类非class属性也不在处理逻辑里，因此能正常保留。

修复/规避方案 #

方案1：修改Markdown处理器配置 #

在项目的docusaurus.config.js中，调整Rehype插件配置，添加能保留自定义属性的插件，或者禁用默认的ul class清除逻辑。示例配置：

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          rehypePlugins: [
            // 配置rehype-attr保留class属性
            ['rehype-attr', {properties: 'class'}]
          ]
        }
      }
    ]
  ]
};

方案2：使用MDX自定义组件 #

创建一个自定义无序列表组件，比如src/components/CustomList.js：

import React from 'react';

export default function CustomList({className, children}) {
  return <ul className={className}>{children}</ul>;
}

在Markdown文件顶部导入组件后直接使用：

import CustomList from '@site/src/components/CustomList';

<CustomList className="custom">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</CustomList>

方案3：无需改配置的规避技巧 #

• 把class加到父容器上，通过后代选择器样式化：

  <div class="custom-list">
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </div>
  

  对应CSS：.custom-list ul { /* 你的样式规则 */ }
• 用自定义属性替代class，通过属性选择器定位：

  <ul data-class="custom">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
  

  对应CSS：ul[data-class="custom"] { /* 你的样式规则 */ }

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