如何在Chakra UI中构建带背景图片的Divider分隔组件？

方法1：用Box组件自定义实现（推荐） #

Chakra的Divider组件自带默认边框样式，容易和背景图冲突，直接用Box组件可以完全自定义分隔线样式，和你之前用Styled Components的逻辑一致：

import { Box, useTheme } from '@chakra-ui/react';

const CustomSeparator = () => {
  const theme = useTheme();
  return (
    <Box
      mb={theme.spacings.normal}
      maskImage="url('data:image/svg+xml,你的SVG编码内容')"
      bg={theme.primary}
      h={theme.spacings.small}
      backgroundRepeat="repeat-x"
    />
  );
};

方法2：覆盖Divider组件的默认样式 #

如果一定要使用Divider组件，需要先清除它的默认边框样式（Divider默认靠border实现分隔线），再设置自定义背景相关属性：

import { Divider, useTheme } from '@chakra-ui/react';

const CustomDivider = () => {
  const theme = useTheme();
  return (
    <Divider
      mb={theme.spacings.normal}
      border="none" // 必须清除默认边框
      maskImage="url('data:image/svg+xml,你的SVG编码内容')"
      bg={theme.primary}
      h={theme.spacings.small}
      backgroundRepeat="repeat-x"
      opacity={1}
    />
  );
};

注意事项 #

• 使用SVG data URL时，要对SVG代码进行URL编码，比如把<替换为%3C、>替换为%3E、空格替换为%20，否则图片无法正常加载。
• 可以直接通过Chakra的主题工具函数useTheme获取主题变量，保持样式和全局主题统一。

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ