Реагниадрелистые компоненты: встроенные стили + 3 другие подходы стиля CSS (с примерами)

Автор оригинала: Nathan Sebhastian.

Там нет ни одного правильного способа стиля ваших компонентов реагирования. Все зависит от того, насколько сложна ваше интерфейсное приложение, а какие подход вы самые удобные.

Существует четыре различных способа стиля реагирования приложения, а в этом посте вы узнаете о них всех. Давайте начнем с встроенного стиля.

Актуальные компоненты состоят из элементов JSX. Но только потому, что вы не пишете регулярные элементы HTML, не означает, что вы не можете использовать старый встроенный стиль метода.

Единственное различие с JSX заключается в том, что встроенные стили должны быть записаны как объект вместо строки.

Вот простой пример:

import React from "react";

export default function App() {
  return (
      Hello World
  );
}

В приведенном выше атрибуте стиль первый набор вьющихся скобок расскажет ваш анализатор JSX, что содержимое между скобками является JavaScript (а не строка). Второй набор курчавых кронштейнов будет инициализировать объект JavaScript.

Свойства стиля имен, которые имеют более одного слова, записаны в камеру, а не используют традиционный дефированный стиль. Например, обычный Выравнивание текста Собственность должна быть написана как TextAlign в JSX:

import React from "react";

export default function App() {
  return (
      Hello World
  );
}

Поскольку атрибут стиля является объектом, вы также можете разделить стиль, написав его как константу. Таким образом, вы можете повторно использовать его на других элементах по мере необходимости:

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.

Одним из преимуществ использования встроенного встроенного подхода в стиле является то, что у вас будет простая сосредоточенная компонентная техника для стиля. Используя объект для стилизации, вы можете продлить свой стиль, распространяя объект. Затем вы можете добавить больше свойств стилей для этого, если хотите.

Но в большом и сложном проекте, где у вас есть сотни реагированных компонентов для управления, это может быть не лучший выбор для вас.

Вы не можете указать псевдо-классы, используя встроенные стили. Это означает : Hover , : фокус , : Active или : посетил Выйдите из окна, а не компонент.

Кроме того, вы не можете указать медиа-запросы для отзывчивого стиля. Давайте рассмотрим другой способ стиля вашего приложения React.

CSS Stylesheates.

Когда вы создаете приложение React, используя Create-React-App , вы будете автоматически использовать WebPack для обработки и обработки и обработки активов.

Великая вещь о WebPack – это то, что оно обрабатывает ваши активы, вы также можете использовать 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 со всеми его классоми и анимационными именами на местах на месте по умолчанию.

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

Чтобы сообщить об этом, вы используете модули CSS, назвать файл CSS с помощью [Имя] .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!
      
    
  );
}

Когда вы создаете свое приложение, WebPack будет автоматически искать файлы CSS, которые имеют .module.css название. WebPack примет эти названия классов и сопоставят их на новое, сгенерированное локализованное имя.

Вот песочница для приведенного выше примера. Если вы проверяете синий абзац, вы увидите, что класс элемента преобразован в _src_app_module__blueparamag Отказ

Модули CSS гарантируют, что ваш синтаксис CSS находит локально.

Еще одним преимуществом использования модулей CSS является то, что вы можете составить новый класс, наследование из других классов, которые вы написали. Таким образом, вы сможете повторно использовать код CSS, который вы написали ранее, как это:

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

Наконец, для того, чтобы написать нормальный стиль с глобальным объемом, вы можете использовать : Глобал Селектор перед наименованием вашего класса:

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

Затем вы можете ссылаться на глобальный стиль Scoped, как обычный класс в вашем файле JS:

Weather Forecast

Стильные компоненты представляют собой библиотеку, предназначенную для реагирования и реагирования на родных. Он сочетает в себе как CSS в JS, так и модулях CSS-модулей для стилизации ваших компонентов.

Позвольте мне показать вам пример:

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!;
}

Когда вы пишете свой стиль, вы на самом деле создаете комментарий реагирования с прикрепленным к нему стилю. Смешной синтаксис STELLED.H1 Содержит BackTick, ставится возможным, используя помеченные помеченные литералы JavaScript.

Были созданы стилизованные компоненты для решения следующих проблем:

Автоматические критические CSS : Стильные компоненты отслеживают отслеживание того, какие компоненты отображаются на странице, и вводит их стили и ничего другого автоматически. В сочетании с разделением кода это означает, что ваши пользователи загружают наименьшее количество необходимого кода.
Нет ошибок названия класса : Стильные компоненты генерируют уникальные имена классов для ваших стилей. Вам никогда не нужно беспокоиться о дублировании, перекрытии или неправильностей.
Легче удалять CSS : Может быть трудно знать, будет ли имя класса уже используется где-то в вашей кодовой базе. Стильные компоненты позволяют очевидно, поскольку каждый билет привязан к конкретному компоненту. Если компонент не используется (какой инструмент может обнаружить) и удаляется, все его стили удаляются с ним.
Простой динамический стиль : Адаптация стайлинга компонента на основе его реквизитов или глобальной темы просто и интуитивно понятно, без необходимости вручную управлять десятками классов.
Безболезненное обслуживание : Вам никогда не придется охотиться на разных файлах, чтобы найти стайлинг, влияющий на ваш компонент, поэтому обслуживание – это кусок пирога, независимо от того, насколько велика ваша кодовая база.
Автоматический поставщик префикс : Напишите свои CSS к текущему стандарту и позволяют стилизованные компоненты обрабатывать остальные.

Вы получаете все эти преимущества, все еще пишу те же CSS, которые вы знаете, и Love – просто связаны с отдельными компонентами.

Если вы хотите узнать больше о стиле компонентов, вы можете посетить Документация и увидеть больше примеров.

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

Долгое время отделяя файл CSS и файл HTML, считался наилучшей практикой, даже если это вызвало много проблем.

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

Hello World

Hello World

CSS Stylesheates.

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

Читайте ещё по теме: