How can I separate this two arrows using styled-components?

Question

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.

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

` 

the first image is my output, and the second one is the thing i'm trying to copy

Answer 1

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

Styled component props