Why can't I use a component as a repeating background image in a styled component?-PHP Chinese Network Q&A

Trying to set a component to a repeating background image of adivI have a pattern that is repeated throughout the website.

Simplified pattern components:

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 (    ) } Pattern.propTypes = { height: PropTypes.string, color: PropTypes.string, } Pattern.defaultProps = { height: '10px', color: 'blue', }

I introduce the modal component and pass it.

Simplified components:

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 (  }/>  ) } SoQues.propTypes = { // props }

But for some reason it won't render.

Research

Change the background image using style components
Pass the background url as prop to the style component
Set the background image using props in the style component
Background image in style component reacts
Using properties to style component background images in React 17

What am I doing wrong and how do I introduce a component and set it to repeat the background image horizontally?

import * as React from 'react'; import { renderToStaticMarkup } from 'react-dom/server'; export default function App() { const mySvgBase64Encoded = btoa(renderToStaticMarkup()); return (

); } const MySvg = () => ( );

) }