Использование пропсов в условном рендеринге с 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 второй кнопке.