Styled Components — это библиотека, которая позволяет писать CSS прямо в JavaScript, используя template literals. Этот пример показывает, как создавать переиспользуемые styled components с предопределёнными стилями.
Сначала импортируй необходимые зависимости:
import React from 'react'
import styled from 'styled-components'
Определи два styled component: Title и Wrapper.
Компонент Title рендерит элемент <h1> со специфичными стилями:
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`
Компонент Wrapper рендерит элемент <section> с паддингом и цветом фона:
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`
После создания эти styled components можно использовать как любой другой React-компонент:
<Wrapper>
<Title>{'Lets start first styled component!'}</Title>
</Wrapper>
Styled components используют template literals для написания CSS прямо в JavaScript, и стили автоматически скопированы в компонент, чтобы избежать конфликтов имён с другими компонентами.
Новый — ещё не проверен сообществом
Вы