Using Props with Styled Components in React

In the previous lesson, we learned that components styled with the Styled Components library can be used as regular React components. In this lesson, we'll see that props will work in a similar way here.

Let's assume we have a React component Block and we've created Styled Components-styled components Input and Container in it:

Block.jsconst Container = styled.div`
  display: flex;
  flex-direction: column;
  width: 150px;
`;

const Input = styled.input`
  margin: 5px;
  font-size: 18px;
`;

Let's place three Input components into Container:

Block.jsfunction Block() {
  return (
    <Container>
      <Input />
      <Input />
      <Input />
    </Container>
  );
}

Using props, we can set different attributes in components. Let's set the second input's placeholder and type attributes to name and text, respectively, and set the third input's type attribute to password:

Block.jsfunction Block() {
  return (
    <Container>
      <Input />
      <Input placeholder="name" type="text" />
      <Input type="password" />
    </Container>
  );
}