Ant Design Collapse组件嵌套ul标签无项目符号问题咨询

Ant Design的全局样式默认会重置<ul>、<li>的默认列表样式（设置了list-style: none），所以你在Collapse内容里的原生列表不会显示项目符号，以下是几种可行的解决方法：

方法一：自定义CSS类（推荐） #

给你的列表添加自定义样式类，覆盖默认重置的样式：

1. 先定义CSS类：

.custom-bullet-list {
  list-style-type: disc; /* 可替换为circle、square等你需要的符号类型 */
  padding-left: 24px; /* 调整缩进，让符号显示在正确位置 */
}

2. 修改Collapse代码，给<ul>加上这个类：

<Collapse 
  accordion 
  expandIconPosition="end" 
  items={[
    { 
      key: '1', 
      label: '123', 
      children: (
        <ul className="custom-bullet-list">
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      )
    }
  ]}
/>

方法二：使用Ant Design的List组件 #

如果你不想自己写CSS，可以直接用Antd内置的List组件，它自带列表样式：

import { Collapse, List } from 'antd';

<Collapse 
  accordion 
  expandIconPosition="end" 
  items={[
    { 
      key: '1', 
      label: '123', 
      children: (
        <List
          dataSource={['1', '2', '3']}
          renderItem={(item) => <List.Item>{item}</List.Item>}
        />
      )
    }
  ]}
/>

方法三：全局重置列表样式（不推荐） #

如果需要让所有原生列表都显示项目符号，可以在全局CSS文件中添加以下代码，但注意这会影响整个项目的<ul>样式，可能破坏其他组件的布局：

ul {
  list-style-type: disc !important;
  padding-left: 24px !important;
}

另外注意你原代码里的items=[{...}]需要改成items={[{...}]}（JSX中属性值为表达式时必须用大括号包裹），否则会导致语法错误。

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