Versuchen Sie, die Komponente auf ein sich wiederholendes Hintergrundbild einzustellen. div Ich habe ein Muster, das auf der gesamten Website wiederverwendet wird.

Optimierte Musterkomponenten:

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',
}

Ich stelle die modale Komponente vor und übergebe sie.

Optimierte Komponenten:

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
}

Aber aus irgendeinem Grund wird es nicht gerendert.

Forschung

• Hintergrundbild mithilfe von Stilkomponenten ändern
• Übergeben Sie die Hintergrund-URL als Requisite an die Stilkomponente
• Legen Sie das Hintergrundbild mithilfe von Requisiten in der Stilkomponente fest
• Hintergrundbild in der Stilkomponente reagiert
• Komponentenhintergrundbild mithilfe von Eigenschaften in React 17 gestalten

Was mache ich falsch und wie kann ich eine Komponente einführen und so einstellen, dass sie das Hintergrundbild horizontal wiederholt?