Мы все знакомы со стандартным способом подключение таблицы стилей до <head> HTML-документа, верно? Это всего лишь один из нескольких способов написания CSS. Но как выглядит стилизация вещей в одностраничном приложении (SPA), скажем, в проекте React?
Оказывается, есть несколько способов стилизации приложения React. Некоторые пересекаются с традиционным стилем, другие не так сильно. Но давайте посчитаем все способы, которыми мы можем это сделать.
Импорт внешних таблиц стилей
Как следует из названия, React может импортировать файлы CSS. Процесс аналогичен тому, как мы связываем файл CSS в HTML. <head>:
- Создайте новый файл CSS в каталоге вашего проекта.
- Пишите CSS.
- Импортируйте его в файл React.
НРАВИТСЯ:
import "./style.css";Обычно это идет вверху файла, где происходят другие импорты:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;В этом примере файл CSS импортируется в App.js из /Components/css папку.
Напишите встроенные стили
Возможно, вы привыкли слышать, что встроенные стили не так уж хороши для удобства сопровождения и тому подобного, но определенно бывают ситуации (вот один!) там, где это имеет смысл. И ремонтопригодность в React не так важна, поскольку CSS часто уже находится внутри одного и того же файла.
Это очень простой пример встроенного стиля в React:
<div className="main" style={{color:"red"}}>Однако лучшим подходом является использование объектов:
- Сначала создайте объект, содержащий стили для разных элементов.
- Затем добавьте его к элементу с помощью
styleатрибут, а затем выберите свойство для стиля.
Давайте посмотрим, что в контексте:
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;Этот пример содержит styles объект, содержащий еще два объекта, один для .main класс, а другой для ввода текста, которые содержат правила стиля, аналогичные тем, которые мы ожидаем увидеть во внешней таблице стилей. Затем эти объекты применяются к style атрибут элементов, находящихся в возвращаемой разметке.
Обратите внимание, что при ссылке на стили используются фигурные скобки, а не кавычки, которые мы обычно используем в простом HTML.
Используйте CSS-модули
Модули CSS… что, черт возьми, с ними случилось, верно? У них есть преимущество локальных переменных, и их можно использовать вместе с React. Но какие они, опять же, именно?
Цитируя документация репо:
CSS-модули работают путем компиляции отдельных файлов CSS как в CSS, так и в данные. Вывод CSS — это обычный глобальный CSS, который можно внедрить непосредственно в браузер или объединить вместе и записать в файл для производственного использования. Данные используются для сопоставления удобочитаемых имен, которые вы использовали в файлах, с глобально безопасным выходным CSS.
Проще говоря, CSS-модули позволяют нам использовать одно и то же имя класса в нескольких файлах без конфликтов, поскольку каждому имени класса дается уникальное программное имя. Это особенно полезно в больших приложениях. Каждое имя класса привязано локально к конкретному компоненту, в который оно импортируется.
Таблица стилей модуля CSS похожа на обычную таблицу стилей, только с другим расширением (например, styles.module.css). Вот как они устроены:
- Создайте файл с
.module.cssкак расширение. - Импортируйте этот модуль в приложение React (как мы видели ранее)
- Добавить
classNameк элементу или компоненту и ссылаться на конкретный стиль из импортированных стилей.
Супер простой пример:
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;Используйте стилизованные компоненты
Вы использовали ли стилизованные компоненты? Он довольно популярен и позволяет вам создавать пользовательские компоненты, используя реальный CSS в вашем JavaScript. Стилизованный компонент — это, по сути, компонент React со стилями — приготовьтесь к этому. Некоторые из функций включают уникальные имена классов, динамические стили и улучшенное управление CSS, поскольку каждый компонент имеет свои собственные стили.
Установите пакет styled-components npm в командной строке:
npm install styled-componentsЗатем импортируйте его в приложение React:
import styled from 'styled-components'Создайте компонент и назначьте ему стилизованное свойство. Обратите внимание на использование литералов шаблонов, обозначенных обратными кавычками в Wrapper объект:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;Приведенные выше Wrapper компонент будет отображаться как div, содержащий эти стили.
Условный стиль
Одним из преимуществ styled-components является то, что сами компоненты функциональны, так как вы можете использовать свойства в CSS. Это открывает двери для условных операторов и изменения стилей в зависимости от состояния или реквизита.
Вот демонстрация, демонстрирующая это:
Здесь мы манипулируем div display свойство в состоянии отображения. Это состояние контролируется кнопкой, которая переключает состояние div при нажатии. Это, в свою очередь, переключает стили двух разных состояний.
Встроенный if утверждения, мы используем ? вместо обычного if/else синтаксис. В else часть после точки с запятой. И не забывайте всегда вызывать или использовать состояние после его инициализации. Например, в последней демонстрации состояние должно быть выше Wrapper стили компонентов.
Удачного стиля React!
Это обертка, ребята! Мы рассмотрели несколько различных способов написания стилей в приложении React. И не то чтобы один лучше остальных; подход, который вы используете, конечно, зависит от ситуации. Надеюсь, теперь вы хорошо их понимаете и знаете, что в вашем арсенале стилей React есть куча инструментов.
