Что такое стилизованные компоненты?

Styled Components — это популярная библиотека для React, которая позволяет разработчикам писать CSS непосредственно в своем коде JavaScript. Эта библиотека использует тегированные литералы шаблонов для стилизации ваших компонентов. Он способствует использованию стилей на уровне компонентов, помогая разделить проблемы стилизации и структуры элементов и делая общий код более удобным в сопровождении.

Преимущества использования стилизованных компонентов

1. Динамическое оформление: Стилизованные компоненты позволяют использовать JavaScript для динамической установки стилей на основе свойств, состояния или любой другой переменной.

2. Лучшая организация: Близость стилей к компонентам, на которые они влияют, делает ваш код более модульным и простым в управлении.

3. Отсутствие ошибок в именах классов: Поскольку стили ограничены компонентами, вам не придется беспокоиться о конфликтах имен классов или проблемах специфичности, которые характерны для традиционного CSS.

4. Поддержка тем: Styled Components предлагает встроенную поддержку тем, что позволяет легко применять согласованные стили во всем приложении.

Установка стилизованных компонентов

Чтобы начать использовать стилизованные компоненты, вам необходимо установить их через npm или Yarn:

npm install styled-components

or

yarn add styled-components

Основное использование

Вот базовый пример, иллюстрирующий, как работают стилизованные компоненты:

import styled from "styled-components";

// Styled component named StyledButton
const StyledButton = styled.button`
  background-color: black;
  font-size: 32px;
  color: white;
`;

function Component() {
  // Use it like any other component.
  return  Login ;
}

Адаптация на основе реквизита

Стилизованные компоненты функциональны, поэтому мы можем легко стилизовать элементы динамически.

import styled from "styled-components";

const StyledButton = styled.button`
  min-width: 200px;
  border: none;
  font-size: 18px;
  padding: 7px 10px;
  /* The resulting background color will be based on the bg props. */
  background-color: ${props => props.bg === "black" ? "black" : "blue";
`;

function Profile() {
  return (
    

      Button A
      Button B
    
  )
}

Тематика

Стилизованные компоненты также поддерживают темы, позволяя вам определить набор стилей (например, цвета, шрифты и т. д.) и последовательно применять их во всем приложении.

Сначала вы определяете свою тему:

import { ThemeProvider } from 'styled-components';

const theme = {
  primary: 'blue',
  secondary: 'gray',
};

Затем оберните свое приложение ThemeProvider и передайте свою тему:

const App = () => (
  
    

      Primary Button
      Default Button
    
  
);

Наконец, откройте свойства темы в ваших стилизованных компонентах:

const Button = styled.button`
  background: ${(props) => (props.primary ? props.theme.primary : props.theme.secondary)};
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid ${(props) => props.theme.primary};
  border-radius: 3px;
`;

Заключение

Styled Components — это мощный инструмент для разработчиков React, стремящихся улучшить удобство сопровождения и масштабируемость своих приложений. Инкапсулируя стили внутри компонентов и используя всю мощь JavaScript, Styled Components обеспечивает современный и эффективный подход к стилизации веб-приложений. Независимо от того, работаете ли вы над небольшим проектом или крупномасштабным приложением, Styled Components поможет вам поддерживать порядок в стилях и чистоту кода.