如何使用樣式組件分隔這兩個箭頭？

Question

我正在嘗試學習樣式組件。 我正在嘗試重新創建下面的圖像。 我可以用 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>

樣式.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;

` 

第一張圖片是我的 output，第二張是我要復制的東西

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

樣式化的組件道具