如何在Chakra主题中自定义Breadcrumb样式、当前页状态及分隔符？

1. 为isCurrentPage状态设置差异化样式 #

在主题的Breadcrumb变体中，通过link的_current属性定义当前页面链接的样式，该属性会自动匹配isCurrentPage为true的BreadcrumbItem对应的链接：

const Breadcrumb = {
  variants: {
    customTheme: {
      link: {
        color: "coarseWoolOpacity.700",
        // 当前页面链接的专属样式
        _current: {
          color: "coarseWoolOpacity.900",
          fontWeight: "semibold",
          cursor: "default",
          textDecoration: "none"
        }
      },
    },
  },
  defaultProps: {
    variant: "customTheme",
  },
}

2. 全局配置ChevronRightIcon作为分隔符 #

在Breadcrumb的defaultProps中添加separator配置，所有使用该主题的Breadcrumb组件会默认使用这个分隔符，无需在每个实例中手动传入：

import { ChevronRightIcon } from "@chakra-ui/icons";

const Breadcrumb = {
  variants: {
    customTheme: {
      link: {
        color: "coarseWoolOpacity.700",
        _current: {
          color: "coarseWoolOpacity.900",
          fontWeight: "semibold",
          cursor: "default",
          textDecoration: "none"
        }
      },
    },
  },
  defaultProps: {
    variant: "customTheme",
    // 全局统一分隔符
    separator: <ChevronRightIcon color="gray.500" />
  },
}

完整主题配置示例 #

import { extendTheme } from "@chakra-ui/react";
import { ChevronRightIcon } from "@chakra-ui/icons";

const Breadcrumb = {
  variants: {
    customTheme: {
      link: {
        color: "coarseWoolOpacity.700",
        _current: {
          color: "coarseWoolOpacity.900",
          fontWeight: "semibold",
          cursor: "default",
          textDecoration: "none"
        }
      },
    },
  },
  defaultProps: {
    variant: "customTheme",
    separator: <ChevronRightIcon color="gray.500" />
  },
}

const theme = extendTheme({
  components: {
    Breadcrumb,
    // 其他组件配置...
  },
  colors: {
    coarseWoolOpacity: {
      700: "rgba(xxx, xxx, xxx, 0.7)",
      900: "rgba(xxx, xxx, xxx, 0.9)"
    },
    // 其他颜色配置...
  },
  // 其他主题配置...
})

export default theme

配置完成后，Breadcrumb组件实例可简化为：

<Breadcrumb spacing="8px">
  <BreadcrumbItem>
    <BreadcrumbLink href="/meetings">Meetings</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="#">{meeting.name}</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

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