Uso de props en el renderizado condicional con Styled Components en React

Las props también se pueden utilizar para el renderizado condicional. Tomemos el componente de React Block con el que trabajamos en la lección anterior.

Hagamos que el fondo para la primera entrada sea amarillo, y para las otras entradas verde. Para esto, en los estilos para el componente Input agreguemos una línea más y quedará:

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

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

Agreguemos la prop first a la primera entrada:

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

Задание 1

Utilizando el renderizado condicional, proporcionado en la teoría de la lección, modifique el código de la solución al problema de la lección anterior para que cuando exista la prop warn el texto del botón sea rojo y su fondo sea amarillo, y sin ella - fondo verde y texto blanco. Pase warn al segundo botón.