[英]How can I separate this two arrows using styled-components?
I'm trying to learn styled-components.我正在尝试学习样式组件。 And I'm trying to re-create the image below.
我正在尝试重新创建下面的图像。 I can do it with CSS but I'm trying to focus all of in styled components.
我可以用 CSS 来做到这一点,但我试图把所有的注意力集中在样式化的组件上。
<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>
style.jsx样式.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;
`
the first image is my output, and the second one is the thing i'm trying to copy第一张图片是我的 output,第二张是我要复制的东西
Pass props (conditions like direction) to the styled component element like below:将道具(如方向的条件)传递给样式化的组件元素,如下所示:
<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;
`;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.