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

Предпосылки

Прежде чем мы начнем, убедитесь, что в вашей системе установлено следующее:

• Node.js и npm (или пряжа)
• Редактор кода (например, VS Code, Sublime Text)

Во-первых, давайте установим styled-componentsпакет, выполнив следующую команду в вашем терминале:

npm install styled-components

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

const StyledButton = styled.button`
  background-color: #008CBA;
  color: white;
  font-size: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  border: none;
`;

const App = () => {
  return (
    <div>
      <h1>Hello World</h1>
      <StyledButton>Click me</StyledButton>
    </div>
  );
}

export default App;

Создание динамических стилей с реквизитами

Одним из преимуществ использования styled-componentsявляется возможность создавать динамические стили на основе реквизита. Давайте изменим наш StyledButtonкомпонент, чтобы он имел разные цвета фона в зависимости от primaryреквизита.

const StyledButton = styled.button`
  background-color: ${props => props.primary ? '#008CBA' : '#E6E6E6'};
  color: white;
  font-size: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  border: none;
`;

<StyledButton>Default button</StyledButton>
<StyledButton primary>Primary button</StyledButton>

Еще одним преимуществом использования styled-componentsявляется возможность создавать многократно используемые стилизованные компоненты. Давайте создадим Cardкомпонент с пользовательским стилем, который мы сможем повторно использовать в нашем приложении.

const Card = styled.div`
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 1em;
  border-radius: 3px;
`;

<Card>
  <h2>Card title</h2>
  <p>Card content</p>
</Card>

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