如何使用样式组件分隔这两个箭头？

Posted 2023-03-15

【中文标题】如何使用样式组件分隔这两个箭头？

【英文标题】：How can I separate this two arrows using styled-components?

【发布时间】：2022-01-20 06:07:35

【问题描述】：

我正在尝试学习样式化组件。我正在尝试重新创建下面的图像。我可以用 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

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;

` 

第一张图片是我的输出，第二张是我要复制的东西

【参考方案1】：

将道具（方向等条件）传递给样式化的组件元素，如下所示：

  <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;
`;

Styled component props

【讨论】：

请选择答案并点赞:)