# Расширенная стилизация компонентов в 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`, созданные вами в предыдущих задачах к этому уроку.

← →
↑