Why cannot I use a component as a repeating background image in Styled Components?

Question

Trying to set a component as a repeating background image to a div I have a pattern that is re-used throughout a site.

Stripped-down pattern component:

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>
  )
}

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

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

I bring in the pattern component and pass it.

Stripped down component:

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

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

const Container = styled.div`
 // Removed
`

// HERE
const Repeat = styled.div`
  margin-bottom: ${({ theme }) => theme.space.normal};
  width: 100%;
  background-image: url(${({ background }) => background});
  background-repeat: repeat-x;
`

export default function SoQues(props) {
  return (
    <Container>
      <Repeat background={<Pattern color={'red'} />}/>
    </Container>
  )
}

SoQues.propTypes = {
  // props
}

but for some reason, it will not render.

Research

What am I doing wrong and how can I bring a component and set it as a horizontal repeating background image?

Styled-components is still CSS behind the scenes. Here the URL of background should be either base64 encoded, or a URL or a color (without url). Perhaps you can save the SVG in a file instead? — Thomas Gak-Deluen, Jul 04 '23 at 13:58
Issue with saving the SVG file is I loose the ability to change theme colors off one line in the theme file — DᴀʀᴛʜVᴀᴅᴇʀ, Jul 04 '23 at 14:50

Thomas Gak-Deluen · Answer 1 · 2023-07-04T20:16:30.307

You could render the SVG to static markup, encode it to base64 and use it as a URL:

Test it live

import * as React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';

export default function App() {
  const mySvgBase64Encoded = btoa(renderToStaticMarkup(<MySvg />));
  return (
    <div
      style={{
        width: '100%',
        height: '100vh',
        background: `url(data:image/svg+xml;base64,${mySvgBase64Encoded})`,
      }}
    />
  );
}

const MySvg = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
    <style>{`.st0{fill:#bcbbbb}.st1{fill:#f48023}`}</style>
    <path className="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" />
    <path
      className="st1"
      d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z"
    />
  </svg>
);

With your code it could be something like the following (I didn't test it)

const Repeat = styled.div`
  margin-bottom: 20px;
  width: 100%;
  background-image: ${({ background }) => `url(data:image/svg+xml;base64,${background})`};
  background-repeat: repeat-x;
`


export default function App() {
  const background = btoa(renderToStaticMarkup(<Pattern height="10px" color="red" />))
  return (
    <div>
      <Repeat background={background}/>
    </div>
  )
}

Why cannot I use a component as a repeating background image in Styled Components?

Research

1 Answers1