Компоненти React Styled: вбудовані стилі + 3 інші підходи до стилів CSS (з прикладами)

Немає жодного правильного способу стилізації компонентів React. Все залежить від того, наскільки складною є ваша інтерфейсна програма, і яким підходом ви користуєтесь найбільше.

Існує чотири різні способи стилізації програми React, і в цій публікації ви дізнаєтесь про них усіх. Почнемо з вбудованого стилю.

Вбудований стиль

Компоненти React складаються з елементів JSX. Але те, що ви не пишете звичайні елементи HTML, не означає, що ви не можете використовувати старий метод вбудованого стилю.

Єдина відмінність від JSX полягає в тому, що вбудовані стилі слід писати як об'єкт, а не як рядок.

Ось простий приклад:

import React from "react"; export default function App() { return ( 

Hello World

); }

У наведеному вище атрибуті style перший набір фігурних дужок повідомляє вашому аналізатору JSX, що вмістом між дужками є JavaScript (а не рядок). Другий набір фігурних дужок ініціалізує об’єкт JavaScript.

Назви властивостей стилю, що містять більше одного слова, пишуться на camelCase замість того, щоб використовувати традиційний дефісний стиль. Наприклад, звичайна text-alignвластивість повинна бути записана як textAlignу JSX:

import React from "react"; export default function App() { return ( 

Hello World

); }

Оскільки атрибут style - це об’єкт, ви також можете відокремити стиль, записавши його як константу. Таким чином, ви можете повторно використовувати його на інших елементах за необхідності:

import React from "react"; const pStyle = { fontSize: '16px', color: 'blue' } export default function App() { return ( 

The weather is sunny with a small chance of rain today.

); }

Якщо вам потрібно розширити стиль абзацу далі по рядку, ви можете скористатися оператором розкидання об’єктів. Це дозволить вам додавати вбудовані стилі до вже оголошеного об’єкта стилю:

import React from "react"; const pStyle = { fontSize: "16px", color: "blue" }; export default function App() { return (  

The weather is sunny with a small chance of rain today.

When you go to work, don't forget to bring your umbrella with you!

); }

Вбудовані стилі - це найосновніший приклад CSS в техніці стилів JS.

Однією з переваг використання вбудованого підходу в стилі є те, що ви будете мати просту техніку укладання, орієнтовану на компоненти. Використовуючи об’єкт для стилізації, ви можете розширити свій стиль, розподіливши об’єкт. Тоді ви можете додати до нього більше властивостей стилю, якщо хочете.

Але у великому та складному проекті, де вам потрібно керувати сотнями компонентів React, це може бути не найкращим вибором для вас.

Ви не можете вказати псевдокласи за допомогою вбудованих стилів. Це означає , що :hover, :focus, :activeабо :visitedвийти у вікно , а не компонент.

Крім того, ви не можете вказати медіа-запити для адаптивного стилю. Давайте розглянемо ще один спосіб стилізації програми React.

Таблиці стилів CSS

Коли ви створюєте додаток React за допомогою create-react-app, ви автоматично використовуєте webpack для обробки імпорту та обробки активів.

Чудова річ веб-пакету в тому, що, оскільки він обробляє ваші активи, ви також можете використовувати importсинтаксис JavaScript для імпортування .cssфайлу у свій файл JavaScript. Потім ви можете використовувати ім'я класу CSS в елементах JSX, які ви хочете стилізувати, наприклад:

.paragraph-text { font-size: 16px; color: 'blue'; }
import React, { Component } from 'react'; import './style.css'; export default function App() { return (  

The weather is sunny with a small chance of rain today.

); }

Таким чином, CSS буде відокремлено від ваших файлів JavaScript, і ви можете просто написати синтаксис CSS, як зазвичай.

За допомогою цього підходу ви навіть можете включити фреймворк CSS, такий як Bootstrap, у свою програму React. Все, що вам потрібно, - це імпортувати файл CSS у ваш кореневий компонент.

Цей метод дозволить вам використовувати всі функції CSS, включаючи псевдокласи та медіа-запити. Але недоліком використання таблиці стилів є те, що ваш стиль не буде локалізований у вашому компоненті.

Усі селектори CSS мають однакову глобальну область дії. Це означає, що один селектор може мати небажані побічні ефекти та порушити інші візуальні елементи вашого додатка.

Як і вбудовані стилі, використання таблиць стилів все ще залишає проблему підтримання та оновлення CSS у великому проекті.

Модулі CSS

Модуль CSS - це звичайний CSS-файл із усіма його іменами класів та анімацій, локально встановленими за замовчуванням.

Кожен компонент React матиме власний файл CSS, і вам потрібно імпортувати необхідні файли CSS у свій компонент.

Для того, щоб повідомити React, що ви використовуєте модулі CSS, назвіть свій файл CSS, використовуючи [name].module.cssконвенцію.

Ось приклад:

.BlueParagraph { color: blue; text-align: left; } .GreenParagraph { color: green; text-align: right; }
import React from "react"; import styles from "./App.module.css"; export default function App() { return (  

The weather is sunny with a small chance of rain today.

When you go to work, don't forget to bring your umbrella with you!

); }

Коли ви створюєте програму, веб-пакет автоматично шукатиме файли CSS, які мають .module.cssназву. Webpack прийме ці імена класів і відобразить їх у нове, сформоване локалізоване ім'я.

Here is the sandbox for the above example. If you inspect the blue paragraph, you’ll see that the element class is transformed into _src_App_module__BlueParagraph.

CSS Modules ensures that your CSS syntax is scoped locally.

Another advantage of using CSS Modules is that you can compose a new class by inheriting from other classes that you’ve written. This way, you’ll be able to reuse CSS code that you’ve written previously, like this:

.MediumParagraph { font-size: 20px; } .BlueParagraph { composes: MediumParagraph; color: blue; text-align: left; } .GreenParagraph { composes: MediumParagraph; color: green; text-align: right; }

Finally, in order to write normal style with a global scope, you can use the :global selector in front of your class name:

:global .HeaderParagraph { font-size: 30px; text-transform: uppercase; }

You can then reference the global scoped style like a normal class in your JS file:

Weather Forecast

Styled Components

Styled Components is a library designed for React and React Native. It combines both the CSS in JS and the CSS Modules methods for styling your components.

Let me show you an example:

import React from "react"; import styled from "styled-components"; // Create a Title component that'll render an 

tag with some styles const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; export default function App() { return Hello World!; }

When you write your style, you’re actually creating a React component with your style attached to it. The funny looking syntax of styled.h1 followed by backtick is made possible by utilizing JavaScript’s tagged template literals.

Styled Components were created to tackle the following problems:

  • Automatic critical CSS: Styled-components keep track of which components are rendered on a page, and injects their styles and nothing else automatically. Combined with code splitting, this means your users load the least amount of code necessary.
  • No class name bugs: Styled-components generate unique class names for your styles. You never have to worry about duplication, overlap, or misspellings.
  • Easier deletion of CSS: It can be hard to know whether a class name is already used somewhere in your codebase. Styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all of its styles get deleted with it.
  • Simple dynamic styling: Adapting the styling of a component based on its props or a global theme is simple and intuitive, without you having to manually manage dozens of classes.
  • Painless maintenance: You never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
  • Automatic vendor prefixing: Write your CSS to the current standard and let styled-components handle the rest.

You get all of these benefits while still writing the same CSS you know and love – just bound to individual components.

If you’d like to learn more about styled components, you can visit the documentation and see more examples.

Conclusion

Many developers still debate the best way to style a React application. There are both benefits and drawbacks in writing CSS in a non-traditional way.

For a long time, separating your CSS file and HTML file was regarded as the best practice, even though it caused a lot of problems.

But today, you have the choice of writing component-focused CSS. This way, your styling will take advantage of React’s modularity and reusability. You are now able to write more enduring and scalable CSS.