Як використовувати Styled Components для масштабованого та зручного підтримування стилів у React - javascript.org.ua

Стилізація React-додатка може стати складною, коли ваш код стає більшим. Styled Components, популярна бібліотека CSS-in-JS, пропонує сучасне, масштабоване та зручне рішення для стилізації React-компонентів.

Що таке Styled Components?

Styled Components дозволяє писати CSS безпосередньо у ваших JavaScript-файлах. Завдяки використанню позначених шаблонних літералів, вона створює унікальні імена класів для стилів, гарантуючи відсутність конфліктів у вашому додатку.

Переваги Styled Components

Обмежені стилі: Стилі обмежені окремими компонентами, що запобігає конфліктам глобальних CSS.
Динамічна стилізація: Застосовування стилів залежно від пропсів або стану компонента.
Покращена підтримуваність: Стилі розташовані поряд з компонентами, що полегшує читання та управління кодом.
Автоматичне додавання вендорних префіксів: Забезпечує сумісність між браузерами без додаткових зусиль.

Налаштування Styled Components

Встановіть бібліотеку:

npm install styled-components

**2.
Встановіть типи TypeScript (необов'язково):

npm install @types/styled-components

Створення Styled Components

Ось як визначати та використовувати styled компоненти у вашому React-додатку:

Визначення Styled Component:

import styled from 'styled-components';  

const Button = styled.button`  
 background-color: ${(props) => (props.primary ? 'blue' : 'gray')};  
 color: white;  
 padding: 10px 20px;  
 border: none;  
 border-radius: 5px;  
 cursor: pointer;  

 &:hover {  
 background-color: ${(props) => (props.primary ? 'darkblue' : 'darkgray')};  
 }  
`;

**2.
Використання Styled Component:

function App() {  
 return (  
   <div>
     <Button primary>Primary Button</Button>
     <Button>Default Button</Button>
   </div>
 );  
}  
export default App;

Динамічне стилювання за допомогою пропсів

Styled Components дозволяють легко застосовувати умовні стилі:

const Heading = styled.h1`
  color: ${(props) => (props.isError ? 'red' : 'green')};
  font-size: 24px;
`;

function App() {
  return <Heading isError>This is an error message</Heading>;
}

Глобальні стилі

Styled Components також дозволяють визначати глобальні стилі:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <h1>Hello, World!</h1>
    </>
  );
}

Теми

Ви можете створити єдину дизайн-систему за допомогою тем:

import { ThemeProvider } from 'styled-components';

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

const Button = styled.button`
  background-color: ${(props) => props.theme.colors.primary};
  color: white;
  padding: 10px;
`;

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Click Me</Button>
    </ThemeProvider>
  );
}

Висновок

Styled Components пропонують сучасний та ефективний спосіб стилізувати React-додатки.
Завдяки таким можливостям, як обмежені стилі, динамічне стилювання та теми, вони забезпечують масштабованість і підтримуваність ваших стилів. Інтеграція їх у ваші проекти може суттєво покращити ваш робочий процес розробки.

Перекладено з: How to Use Styled Components for Scalable and Maintainable React Styling