Библиотека 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), используя следующие принципы:
- если стилизуем обычные элементы (например, `styled.div`), то передаются все известные атрибуты в DOM
- если стилизуем React-компонент (например, `styled(MyComponent)`), то передаются все пропсы (props).