嘗試將元件設定為 div
的重複背景圖片我有一個在整個網站中重複使用的模式。
精簡的模式元件:
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', }
我引入模式元件並傳遞它。
精簡元件:
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 }
但由於某種原因,它不會渲染。
我做錯了什麼以及如何引入組件並將其設置為水平重複背景圖像?
您可以將 SVG 渲染為靜態標記,將其編碼為 Base64 並將其用作 URL:
即時測試
使用您的程式碼,它可能類似於以下內容(我沒有測試它)