Описание тега styled-components

styled-components- это проект с открытым исходным кодом, разработанный Гленом Мэддерном и Максом Штойбером, целью которого является упростить стилизацию компонентных систем, которые сейчас сосредоточены исключительно на React.

Это то, что использует styled-components выглядит как:

import React from 'react';
import styled from 'styled-components';

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

Эти две переменные, Title а также Wrapper, теперь являются компонентами React, которые вы можете отображать, как любой другой компонент React:

<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
</Wrapper>

(Живая демонстрация)

Для получения дополнительной информации и примеров см. Официальную документацию!