Библиотека Styled Components

Библиотека Styled Components использует строковые шаблоны (дополнение к JavaScript версии ES2015) и CSS, позволяют писать CSS-код для стилизации компонентов React.JS.

Для установки используется менеджер пакетов npm:

npm install --save styled-components

Для обеспечения совместимости с версиями javascript используется компилятор Babel, поэтому убедитесь, что библиотека добавлена в конфигурацию babel - .babelrc.

{
  "presets": ["env", "react"],
  "plugins": ["styled-components"]
}

Альтернативный способ установки, это CDN сервер:

<script src="https://unpkg.com/styled-components/dist/styled-components.min.js" />

После добавления styled component получаем доступ к глобальной переменной window.styled.

Простейший пример применения:

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

const StyledDiv = Styled.div`
  color: red;
  background-color: yellow;
`;

const StyledTitle = Styled.h1`
  font-size: 30px;  
`;

class StyledComponent extends React.Component {

    render() {
        return (
         <StyledDiv>
              <StyledTitle>
                   Text
              </StyledTitle>
         </StyledDiv>
        )
    }
}

export default StyledComponent;

Styled Components передают свои свойства (props), используя следующие принципы:

  1. если стилизуем обычные элементы (например, `styled.div`), то передаются все известные атрибуты в DOM
  2. если стилизуем React-компонент (например, `styled(MyComponent)`), то передаются все пропсы (props).