Стилизованные компоненты в React

Введение:

Стилизованные компоненты позволяют нам писать CSS непосредственно в наших файлах JavaScript, что упрощает управление кодом и упорядочение стилей. С помощью стилизованных компонентов мы можем создавать повторно используемые компоненты пользовательского интерфейса с их собственными уникальными стилями, что упрощает поддержание единообразного дизайна во всем приложении.

Одним из ключевых преимуществ стилизованных компонентов является возможность использовать свойства для динамического изменения стилей компонента в зависимости от его состояния. Эта функция позволяет создавать более отзывчивые и интерактивные пользовательские интерфейсы.

Чтобы установить пакет стилизованных компонентов в ваше приложение для реагирования:

npm install styled-components

Пример:

Основной стиль

import styled from 'styled-components';

const Button = styled.button`
  background-color: #008CBA;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;

  &:hover {
    background-color: #006F9F;
  }
`;

function App() {
  return (
    <Button>Click me</Button>
  );
}

В этом примере показано, как создать стилизованную кнопку с использованием стилизованных компонентов в React. Код создает новый стилизованный компонент кнопки, используя метод styled.button из библиотеки styled-components. Компоненту предоставляется набор стилей CSS с использованием литералов шаблона. Эти стили определяют цвет фона кнопки, цвет текста, отступы, радиус границы, размер шрифта и тип курсора. Селектор &:hover используется для изменения цвета фона кнопки, когда пользователь наводит на нее курсор. Затем стилизованный компонент кнопки можно использовать в компоненте App как обычную кнопку.

2. Динамический стиль на основе реквизита:

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.primary ? '#008CBA' : '#E7E7E7'};
  color: ${props => props.primary ? 'white' : 'black'};
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;

  &:hover {
    background-color: ${props => props.primary ? '#006F9F' : '#D4D4D4'};
  }
`;

function App() {
  return (
    <>
      <Button primary>Click me</Button>
      <Button>Click me too</Button>
    </>
  );
}

В этом примере показано, как создать кнопку с динамическим стилем на основе свойств. Код создает новый стилизованный компонент кнопки с теми же стилями CSS, что и в предыдущем примере, но с добавлением свойств, которые можно передать для изменения стиля кнопки. Цвет фона кнопки и цвет текста задаются на основе реквизита primary, который может быть либо true, либо false. Селектор &:hover также изменен на основе реквизита primary, чтобы изменить цвет фона кнопки, когда пользователь наводит на нее курсор. Затем стилизованный компонент кнопки можно использовать в компоненте App с различными реквизитами для создания кнопок с разными стилями.

3. Расширение существующих стилей:

import styled from 'styled-components';

const Button = styled.button`
  background-color: #008CBA;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;

  &:hover {
    background-color: #006F9F;
  }
`;

const DangerButton = styled(Button)`
  background-color: #FF4136;

  &:hover {
    background-color: #E71D36;
  }
`;

function App() {
  return (
    <>
      <Button>Click me</Button>
      <DangerButton>Don't click me</DangerButton>
    </>
  );
}

В этом примере показано, как создать новый стилизованный компонент, расширив стили существующего компонента. Код создает новый компонент DangerButton, используя метод styled и передавая существующий компонент Button в качестве аргумента. Новый компонент наследует все стили CSS компонента Button, но с добавлением нового цвета фона и стиля наведения. Затем компонент DangerButton можно использовать в компоненте App как отдельный компонент кнопки со стилем.

4. Глобальные стили:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    background-color: #F5F5F5;
    font-family: 'Arial', sans-serif;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <h1>Hello world</h1>
      <p>This is a paragraph</p>
    </>
  );
}

В этом примере показано, как создавать глобальные стили с помощью стилизованных компонентов. Код использует метод createGlobalStyle из библиотеки styled-components для создания нового компонента, который устанавливает глобальные стили для элемента body. Глобальные стили определяют цвет фона и семейство шрифтов для элемента body. Затем компонент GlobalStyle можно использовать в компоненте App для применения глобальных стилей ко всем элементам в компоненте App.

Заключение:

Стилизованные компоненты — отличный способ упростить код, создать многократно используемые компоненты пользовательского интерфейса и поддерживать единый дизайн во всем приложении. Попробуйте их в своем следующем проекте!

Стилизованные компоненты в React