Trying to set a component to a repeating background image of a div
I 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 ( <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 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 ( <Container> <Repeat background={<Pattern color={'red'} />}/> </Container> ) } SoQues.propTypes = { // props }
But for some reason it won't render.
What am I doing wrong and how do I introduce a component and set it to repeat the background image horizontally?
P粉7153042392023-09-13 12:50:58
You can render the SVG as a static markup, encode it to Base64 and use it as a URL:
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> );
Using your code, it might look 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> ) }