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

Пропсы можно использовать и для условного рендеринга. Возьмем React компонент `Block`, с которым мы работали на прошлом уроке.

Сделаем так, чтобы у нас фон для первого инпута был желтым, а для других инпутов зеленым. Для этого, в стили для компонента `Input` добавим еще строчку и получится:

`const Input = styled.input` background: ${(props) => (props.first ? 'yellow' : 'green')}; margin: 5px; font-size: 18px; `;`

Добавим пропс `first` первому инпуту:

`<Container> <Input first /> <Input placeholder="name" type="text" /> <Input type="password" /> </Container>`

Используя условный рендеринг, приведенный в теории урока, модифицируйте код решения задачи к предыдущему уроку так, чтобы при наличии пропса `warn` текст кнопки был красным и ее фон был желтым, а без него - зеленый фон и белый текст. Передайте `warn` второй кнопке.

← →
↑