0
392
Vistas¿Cómo puedo separar estas dos flechas usando componentes con estilo?
Estoy tratando de aprender componentes con estilo. Y estoy tratando de volver a crear la imagen de abajo. Puedo hacerlo con CSS pero estoy tratando de enfocarme en componentes con estilo.
<Container> {sliderItems.map((item) => ( <Wrapper key={item.id}> <Blur> <BlurInfo> <BlurTitle></BlurTitle> <BlurP></BlurP> </BlurInfo> </Blur> <ImageContainer></ImageContainer> </Wrapper> ))} <Arrow> <ArrowUpwardTwoToneIcon direction="left" /> </Arrow> <Arrow> <ArrowDownwardTwoToneIcon direction="right" /> </Arrow> </Container>estilo.jsx
export const Arrow = styled.div` width: 50px; height: 50px; background-color: #fff7f7; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 50%; cursor: pointer; opacity: 0.5; z-index: 2; transform: translate(0%, -50%); ` export const Container = styled.div` height: calc(100vh - 60px); width: 100%; background-color: blue; position: relative; overflow: hidden; ` 
la primera imagen es mi salida, y la segunda es lo que estoy tratando de copiar
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Pase accesorios (condiciones como dirección) al elemento del componente con estilo como se muestra a continuación:
<div> <Input defaultValue="@probablyup" type="text" /> <Input defaultValue="@geelen" type="text" inputColor="rebeccapurple" /> </div> const Input = styled.input` padding: 0.5em; margin: 0.5em; color: ${props => props.inputColor || "palevioletred"}; background: papayawhip; border: none; border-radius: 3px; `;
·
Juan Pablo Isaza
Denunciar
Responde la pregunta