Расширенная стилизация компонентов в React
Предположим у нас есть React компонент
Block и мы создали в нем стилизованные
при помощи Styled Components компоненты
Button и Container:
const Container = styled.div`
display: flex;
flex-direction: column;
width: 150px;
`;
const Button = styled.input`
background-color: orange;
font-size: 18px;
margin: 5px;
`;
А теперь представим, что нам нужен еще один
компонент Button, только с
белым текстом кнопки и зеленым фоном.
Для этого нам достаточно на базе нашего
компонента Button создать новый
компонент MdButton и прописать в нем
только те свойства, которые мы хотим изменить:
const MdButton = styled(Button)`
color: white;
background-color: green;
`;
Расположим в Block все наши
стилизованные компоненты:
function Block() {
return (
<Container>
<Button>btn0</Button>
<MdButton>btn1</MdButton>
</Container>
);
}
Создайте пустой React компонент Block1.
С помощью Styled Components создайте
в нем стилизованный див шириной и высотой
в 150px, желтым фоном,
и шириной границы 2px,
назовите его DIVA.
На базе дива из предыдущей задачи создайте
такой же див DIVB, только с зеленым
фоном и шириной границы в 3px.
В Block1 создайте див Container.
Разместите в нем два компонента DIVA
и между ними один DIVB, созданные вами
в предыдущих задачах к этому уроку.