为何无法在Styled Components中将组件设为重复背景图？

错误原因 #

background-image的url()参数要求是图片资源的URL字符串，你直接传入React组件<Pattern color={'red'} />，这是一个React元素对象，并非合法的URL格式，浏览器无法解析，因此背景图无法正常渲染。同时你没有给Repeat容器设置明确高度，即使背景图正常加载，也会因容器高度为0而看不到效果。

解决方案 #

方案1：将SVG转为Data URL（推荐） #

把Pattern组件的SVG内容转换成Data URL格式，直接作为background-image的参数使用。

修改Pattern组件，新增生成Data URL的方法

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

const Container = styled.svg`
  height: ${({ height }) => height};
`

const Path = styled.path`
  fill: ${({ color }) => color};
`

export default function Pattern({ height, color }) {
  return (
    <Container height={height} viewBox="0 0 20 20" data-cy="svg-pattern">
      <Path
        color={color}
        d="M0.5,0.4v19.2h19V0.4H0.5z M13.5,15.5L7,15.9l-3.5-5.5l3-5.9L13,4.1l3.5,5.5L13.5,15.5z"
      />
    </Container>
  )
}

// 新增：生成SVG的Data URL静态方法
Pattern.getBackgroundUrl = (color = 'blue', height = '10px') => {
  // 构造SVG字符串并去除换行
  const svgString = `
    <svg height="${height}" viewBox="0 0 20 20">
      <path fill="${color}" d="M0.5,0.4v19.2h19V0.4H0.5z M13.5,15.5L7,15.9l-3.5-5.5l3-5.9L13,4.1l3.5,5.5L13.5,15.5z" />
    </svg>
  `.trim().replace(/\n/g, '');
  // 转为Data URL格式
  return `data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`;
}

Pattern.propTypes = {
  height: PropTypes.string,
  color: PropTypes.string,
}

Pattern.defaultProps = {
  height: '10px',
  color: 'blue',
}

修改调用组件的代码

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

// Components
import Pattern from '../atoms/Pattern'

const Container = styled.div`
 // 原有样式保留
`

const Repeat = styled.div`
  margin-bottom: ${({ theme }) => theme.space.normal};
  width: 100%;
  height: 10px; // 必须设置明确高度
  background-image: url(${({ backgroundUrl }) => backgroundUrl});
  background-repeat: repeat-x;
`

export default function SoQues(props) {
  return (
    <Container>
      <Repeat backgroundUrl={Pattern.getBackgroundUrl('red', '10px')}/>
    </Container>
  )
}

SoQues.propTypes = {
  // 自定义props
}

方案2：直接渲染重复的SVG组件 #

如果不需要严格使用background-image，可以直接在容器内渲染多个Pattern组件实现横向重复：

export default function SoQues(props) {
  return (
    <Container>
      <div style={{ 
        width: '100%', 
        height: '10px', 
        display: 'flex',
        overflowX: 'hidden'
      }}>
        {/* 生成足够多的SVG实现横向重复效果 */}
        {Array.from({length: 50}).map((_, index) => (
          <Pattern key={index} color="red" height="10px" />
        ))}
      </div>
    </Container>
  )
}

关键注意事项 #

• 必须给承载背景图的容器设置明确高度，否则容器高度为0，背景图无法显示。
• 使用Data URL时，要确保SVG字符串的语法正确，注意引号转义问题。

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