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

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

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

Block.jsconst Input = styled.input`
  background: ${(props) => (props.first ? 'yellow' : 'green')};

  margin: 5px;
  font-size: 18px;
`;

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

Block.js<Container>
  <Input first />
  <Input placeholder="name" type="text" />
  <Input type="password" />
</Container>

Задание 1

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