使用Chakra UI的List组件时如何移除项目符号图标？

问题场景 #

使用Chakra UI的List组件时，按照官方示例编写代码后，官方演示效果无项目符号，但在Chrome v108.0.5359.98浏览器中运行时，ListItem却显示了默认的项目符号，需要实现等同于CSS li {list-style-type: none;} 的效果。

官方示例代码如下：

<List spacing={3}>
  <ListItem>
    <ListIcon as={MdCheckCircle} color='green.500' />
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
  </ListItem>
  <ListItem>
    <ListIcon as={MdCheckCircle} color='green.500' />
    Assumenda, quia temporibus eveniet a libero incidunt suscipit
  </ListItem>
  <ListItem>
    <ListIcon as={MdCheckCircle} color='green.500' />
    Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
  </ListItem>
  {/* 也可以使用react-icons的自定义图标 */}
  <ListItem>
    <ListIcon as={MdSettings} color='green.500' />
    Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
  </ListItem>
</List>

解决方法 #

方法一：直接给List组件添加listStyleType属性 #

这是最直接的方式，直接在List组件上设置对应CSS属性：

<List spacing={3} listStyleType="none">
  {/* 保持原有ListItem内容不变 */}
</List>

方法二：使用Chakra UI的css属性自定义样式 #

如果需要更灵活的样式控制，可通过css属性注入样式：

<List spacing={3} css={{ listStyleType: 'none' }}>
  {/* 保持原有ListItem内容不变 */}
</List>

方法三：全局配置（适用于所有List组件） #

如果希望项目中所有List组件都默认移除项目符号，可以在Chakra UI的主题配置中修改组件默认样式：

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  components: {
    List: {
      baseStyle: {
        listStyleType: 'none',
      },
    },
  },
});

// 在应用根组件中使用自定义主题
<ChakraProvider theme={theme}>
  {/* 应用内容 */}
</ChakraProvider>

原因说明 #

出现该问题通常是浏览器默认样式或项目全局CSS规则覆盖了Chakra UI的默认样式，通过上述方法可以强制移除项目符号，实现预期效果。

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