# Использование пропсов с Styled Components в React

Из прошлого урока мы узнали, что стилизованные при помощи библиотеки Styled Components компоненты можно использовать как обычные React компоненты. В данном уроке мы увидим, что здесь подобным образом будут работать и пропсы.

Предположим у нас есть React компонент `Block` и мы создали в нем стилизованные при помощи Styled Components компоненты `Input` и `Container`:

`const Container = styled.div` display: flex; flex-direction: column; width: 150px; `; const Input = styled.input` margin: 5px; font-size: 18px; `;`

Расположим три компонента `Input` в `Container`:

`function Block() { return ( <Container> <Input /> <Input /> <Input /> </Container> ); }`

Используя пропсы, мы можем устанавливать в компонентах различные атрибуты. Давайте установим второму инпуту атрибуты `placeholder` и `type` со значениями `name` и `text`, соответственно, а третьему инпуту у атрибута `type` установим значение `password`:

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

Создайте пустой React компонент `Block`, сделайте в нем див, в котором будет три кнопки. При помощи библиотеки Styled Components, стилизуйте этот див и кнопки. Используя пропсы, заблокируйте первую кнопку, а третьей сделайте тип `reset`.

← →
↑