如何在Chakra UI Popover中正确显示带项目符号的HTML列表？

方案1：使用Chakra UI原生列表组件（推荐） #

既然基于Chakra UI开发，直接用它提供的UnorderedList和ListItem组件是最优解——既规避dangerouslySetInnerHTML的安全风险，又能完美适配Chakra的样式体系，无需额外CSS调整：

import { Popover, PopoverTrigger, PopoverContent, UnorderedList, ListItem, Button } from '@chakra-ui/react';

function HoverListPopover() {
  return (
    <Popover trigger="hover" placement="bottom">
      <PopoverTrigger>
        <Button>HOVER HERE</Button>
      </PopoverTrigger>
      <PopoverContent p={4}>
        <UnorderedList>
          <ListItem>test</ListItem>
          <ListItem>test</ListItem>
          <ListItem>test</ListItem>
        </UnorderedList>
      </PopoverContent>
    </Popover>
  );
}

方案2：修复dangerouslySetInnerHTML的样式问题 #

如果必须通过HTML字符串注入列表，问题根源是Chakra UI默认重置了列表的原生样式（比如list-style: none、padding-left: 0），需要手动恢复列表的默认行为：

方法A：内联样式嵌入HTML字符串 #

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

function HoverHTMLListPopover() {
  const listHtml = `
    <ul style="list-style-type: disc; padding-left: 1.5rem; margin: 0;">
      <li style="display: list-item; margin: 0.25rem 0;">test</li>
      <li style="display: list-item; margin: 0.25rem 0;">test</li>
      <li style="display: list-item; margin: 0.25rem 0;">test</li>
    </ul>
  `;

  return (
    <Popover trigger="hover" placement="bottom">
      <PopoverTrigger>
        <Button>HOVER HERE</Button>
      </PopoverTrigger>
      <PopoverContent p={4}>
        <Box dangerouslySetInnerHTML={{ __html: listHtml }} />
      </PopoverContent>
    </Popover>
  );
}

方法B：用Chakra+Emotion统一设置样式 #

import { Popover, PopoverTrigger, PopoverContent, Button, Box } from '@chakra-ui/react';
import { css } from '@emotion/react';

const listStyle = css`
  ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0;
  }
  li {
    display: list-item;
    margin: 0.25rem 0;
  }
`;

function HoverHTMLListPopover() {
  const listHtml = `
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  `;

  return (
    <Popover trigger="hover" placement="bottom">
      <PopoverTrigger>
        <Button>HOVER HERE</Button>
      </PopoverTrigger>
      <PopoverContent p={4}>
        <Box css={listStyle} dangerouslySetInnerHTML={{ __html: listHtml }} />
      </PopoverContent>
    </Popover>
  );
}

关于你之前遇到的单符号问题 #

仅给li添加display: list-item不足以解决问题：Chakra默认会给ul设置list-style: none和padding-left: 0，导致项目符号无法显示或所有符号重叠；若ul被意外设置为display: flex等布局，li会挤在同一行，看起来只有一个符号。

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