如何移除Chakra-UI Accordion组件的灰色线条？

Chakra-UI的Accordion组件默认带的顶部/底部灰色线条，其实是组件自带的边框样式，用下面两种方法就能轻松移除：

方法一：直接通过组件样式props覆盖 #

这种方式适合单个或少数Accordion组件的个性化修改：

• 给AccordionItem组件设置border="0"，可以直接移除所有边框；如果只想移除顶部或底部线条，就用borderTop="0"或borderBottom="0"
  示例代码：

  <Accordion>
    <AccordionItem border="0">
      <AccordionButton>
        <Box flex="1" textAlign="left">
          折叠面板标题
        </Box>
        <AccordionIcon />
      </AccordionButton>
      <AccordionPanel pb={4}>
        折叠面板内容区域
      </AccordionPanel>
    </AccordionItem>
  </Accordion>
  

• 如果灰色线条是来自AccordionButton，直接给该组件设置border="0"或者borderColor="transparent"即可

方法二：自定义主题全局修改 #

如果项目中有多个Accordion组件需要统一移除边框，推荐通过修改Chakra主题来实现：

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

const theme = extendTheme({
  components: {
    Accordion: {
      variants: {
        default: {
          item: {
            border: '0', // 移除所有边框
            // 按需单独移除上下边框：borderTop: '0', borderBottom: '0'
          }
        }
      }
    }
  }
})

之后在应用根节点的ChakraProvider中传入这个自定义主题即可全局生效。

官方文档「设置展开状态样式」内容翻译 #

设置展开状态样式 #

你可以使用_expanded样式属性来定制AccordionButton处于展开状态时的样式。例如修改展开时的背景色、文字颜色：

<AccordionButton _expanded={{ bg: 'blue.100', color: 'blue.600' }}>
  {/* 按钮内容 */}
</AccordionButton>

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