<style> .DhtEg { background: red; border-radius: 8px; color: white; } </style> … <button class="DhtEg">test</button>
В приведенном выше примере мы видим элемент тега style, добавленный модулями CSS, с именем хешированного класса и имеющимся у нас элементом DOM, который использует хэш.
очарование
Glamour — это библиотека CSS-in-JS, которая позволяет нам объявлять наш CSS в том же файле, что и JavaScript. Glamour, опять же, хэширует имена классов, но обеспечивает чистый синтаксис для создания таблиц стилей CSS с помощью JavaScript.
Определение стиля строится с помощью переменной JavaScript, которая описывает каждый из атрибутов с использованием синтаксиса верблюда . Использование верблюжьего дела важно, так как CSS определяет все атрибуты в случае поезда . Основным отличием является изменение имени атрибута. Это может быть проблемой при копировании и вставке CSS из других частей нашего приложения или примеров CSS. Например, overflow-y будет изменен на overFlowY . Однако с этим изменением синтаксиса Glamour поддерживает медиазапросы и теневые элементы, предоставляя больше возможностей нашим стилям:
button.js
import { css } from 'glamor'; const rules = css({ background: red; borderRadius: 8px; color: 'white'; }); const button = () => { return <button {...rules}>Click Me</button>; };
стилизованных-компоненты
styled-components — это новая библиотека, которая фокусируется на объединении компонентов и стилей React. Предоставляя чистый и простой в использовании интерфейс для стилевого оформления как React, так и React Native, styled-components меняет не только реализацию, но и процесс создания стилевых компонентов React.
styled-компоненты могут быть установлены из npm через:
npm install styled-components
Импортируется как любой стандартный пакет npm:
import styled from 'styled-components';
После установки настало время сделать компоненты React в стиле легкими и приятными.
Создание универсальных стилизованных компонентов React
Стилизованные компоненты React могут быть построены разными способами. Библиотека styled-components предоставляет шаблоны, которые позволяют нам создавать хорошо структурированные приложения пользовательского интерфейса. Создание из небольших компонентов пользовательского интерфейса, таких как кнопки, вводы, типографика и вкладки, создает более унифицированное и связное приложение.
Используя наш пример кнопки из ранее, мы можем создать универсальную кнопку, используя styled-components:
const Button = styled.button` background: red; border-radius: 8px; color: white; `; class Application extends React.Component { render() { return ( <Button>Click Me</Button> ) } }
Codepen
Как мы видим, мы можем создать нашу общую кнопку, сохраняя CSS в соответствии с JavaScript. styled-components предоставляет широкий спектр элементов, которые мы можем стилизовать. Мы можем сделать это, используя прямые ссылки на элементы или передавая строки в функцию по умолчанию.
const Button = styled.button` background: red; border-radius: 8px; color: white; `; const Paragraph = styled.p` background: green; `; const inputBg = 'yellow'; const Input = styled.input` background: ${inputBg}; color: black; `; const Header = styled('h1')` background: #65a9d7; font-size: 26px; ` class Application extends React.Component { render() { return ( <div> <Button>Click Me</Button> <Paragraph>Read ME</Paragraph> <Input placeholder="Type in me" /> <Header>I'm a H1</Header> </div> ) } }
Codepen
Основным преимуществом этого метода стилей является возможность писать чистый CSS. Как видно из примера Glamour, имена атрибутов CSS пришлось изменить на случай верблюда, поскольку они были атрибутами объекта JavaScript.
styled-components также создает дружественные для React примитивы, которые действуют как существующие элементы. Использование литералов шаблонов JavaScript позволяет нам использовать все возможности CSS для стилизации компонентов. Как видно из примера элемента input, мы можем определить внешние переменные JavaScript и применить их к нашим стилям.
С помощью этих простых компонентов мы можем легко создать руководство по стилю для нашего приложения. Но во многих случаях нам также понадобятся более сложные компоненты, которые могут изменяться в зависимости от внешних факторов.
Настраиваемые компоненты в стиле React
Настраиваемая природа стилевых компонентов — настоящая сила. Это обычно может быть применено к кнопке, которая должна изменить стили в зависимости от контекста. В этом случае у нас есть два размера кнопок — маленький и большой. Ниже приведен чистый метод CSS:
CSS
button { background: red; border-radius: 8px; color: white; } .small { height: 40px; width: 80px; } .medium { height: 50px; width: 100px; } .large { height: 60px; width: 120px; }
JavaScript
class Application extends React.Component { render() { return ( <div> <button className="small">Click Me</button> <button className="large">Click Me</button> </div> ) } }
Codepen
Когда мы воспроизводим это, используя styled-components, мы создаем компонент Button, который имеет основной стиль по умолчанию для фона. Поскольку компонент действует как компонент React, мы можем использовать реквизиты и соответственно изменять результат стиля:
const Button = styled.button` background: red; border-radius: 8px; color: white; height: ${props => props.small ? 40 : 60}px; width: ${props => props.small ? 60 : 120}px; `; class Application extends React.Component { render() { return ( <div> <Button small>Click Me</Button> <Button large>Click Me</Button> </div> ) } }
Codepen
Расширенное использование
styled-components предоставляет возможность создавать сложные расширенные компоненты, и мы можем использовать существующие шаблоны JavaScript для создания компонентов. В приведенном ниже примере показано, как составляются компоненты — в случае использования уведомительных сообщений, которые следуют базовому стилю, но каждый тип имеет свой цвет фона. Мы можем создать базовый, стилизованный компонент и создать его сверху для создания расширенных компонентов:
const BasicNotification = styled.p` background: lightblue; padding: 5px; margin: 5px; color: black; `; const SuccessNotification = styled(BasicNotification)` background: lightgreen; `; const ErrorNotification = styled(BasicNotification)` background: lightcoral; font-weight: bold; `; class Application extends React.Component { render() { return ( <div> <BasicNotification>Basic Message</BasicNotification> <SuccessNotification>Success Message</SuccessNotification> <ErrorNotification>Error Message</ErrorNotification> </div> ) } }
Codepen
Поскольку styled-компоненты позволяют нам передавать стандартные элементы DOM и другие компоненты, мы можем создавать расширенные функции из базовых компонентов.
Компонентная структура
Из нашего продвинутого и базового примера мы можем построить структуру компонентов. У большинства стандартных приложений React есть каталог компонентов: мы styledComponents наши стилизованные компоненты в каталог styledComponents . Наш каталог styledComponents содержит все основные и составные компоненты. Затем они импортируются в компоненты дисплея, используемые нашим приложением. Макет каталога можно увидеть ниже:
src/ components/ addUser.js styledComponents/ basicNotification.js successNotification.js errorNotification.js
Вывод
Как мы видели в этом посте, способы, которыми мы можем стилизовать наши компоненты, сильно различаются — ни один из них не является очевидным методом победы. Эта статья показала, что styled-components подтолкнул реализацию элементов стиля вперед и заставил нас подвергнуть сомнению наши мыслительные процессы в отношении нашего подхода.
У каждого разработчика, в том числе и у меня, есть свои любимые способы ведения дел, и хорошо знать, какой диапазон методов можно использовать в зависимости от приложения, над которым мы работаем. Системы стилей и языки значительно продвинулись за эти годы, и нет сомнений в том, что они обязательно будут развиваться дальше и больше изменяться в будущем. Это очень интересное и интересное время в разработке интерфейса.
Какой ваш предпочтительный способ стилизации компонентов React и почему?
Эта статья была рецензирована Vildan Softic . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!
