Использование амперсанда для классов CSS, псевдоклассов, псевдоэлементов и элементов
styled-components
— популярная библиотека для оформления приложений React. Мы представили что это такое и как это использовать и предоставили 7 способов наследования стилей с помощью стилизованных компонентов.
В этой статье мы поговорим об использовании амперсанда. В styled-components &
(амперсанд) используется для ссылки на все экземпляры компонента. Поддерживаемый препроцессором stylis, &
используется для написания чистого кода для вложенности. &
происходит от Sass и Less, которые являются расширениями CSS.
Мы повторно использовали Рабочую среду Create React App в прошлой статье, чтобы изучить использование амперсанда. В среде установлен следующий пакет:
styled-components
Вот список примеров:
- Классы CSS
– Пример селектора.green
– Пример компонентаContainer
– Пример селектора&.green
– Пример селектора& .green
– Пример селектора&&&&& .green
- Псевдоклассы
– Пример селектора&:hover
– Пример селектора& :hover
– Пример селектора& :is(div):hover
- Псевдоэлементы
— Пример селектора&::first-line
— Пример селекторов& ::before
и& ::first-line
- Элементы
– Пример селектора& div
– Пример селектораspan &
CSS-классы
В HTML атрибут class
используется для указания класса(ов) элемента. Он может быть установлен для любого типа элемента и может принимать несколько имен классов, разделенных пробелом. Класс может использоваться несколькими элементами, а имя класса чувствительно к регистру.
Пример селектора .green
В CSS имена классов обычно используются для стилизации элементов.
Мы создаем элемент, для которого className
установлено значение container
. Далее src/App.js
:
В строке 1 импортируется ./App.css
.
В строке 4 элемент div
устанавливает className
в container
.
Вот правило CSS, определенное селектором класса container
в src/App.css
:
Выполните npm start
, и мы увидим следующий пользовательский интерфейс с синим фоном:
Вот окно проверки:
Он показывает, что div
применяется с правилом CSS .container
, определенным в App.css
.
Пример компонента «Контейнер»
Селекторы, связанные с классом, можно заменить styled-components
— пользовательскими компонентами React. Легко отследить, какие компоненты не используются или не определены во время компиляции. Это улучшает управляемость кода, сравнивая имена классов или другими способами. Поскольку это CSS в JavaScript, он обеспечивает динамическое моделирование с возможностью программирования.
Мы создаем стилизованный компонент Container
. Ниже приведен пример компонента Container
в src/App.js
:
В строке 1 импортируется styled
вместо ./App.css
.
В строках 3–8 стилизованный компонент Container
расширяет стили div
. Он содержит свойства CSS, определенные в src/App.css
.
Выполните npm start
, и все заработает.
Вот окно проверки:
Внутри styled-components
генерирует два класса для каждого компонента — один статический, а другой динамический. Имя класса генерируется алгоритмом MurmurHash. Он генерирует уникальный идентификатор на основе идентификатора компонента и оцененных строк стиля, а затем хеш-номер преобразуется в буквенное имя класса.
Имя статического класса — sc-<hashedStringName>
. Он используется для идентификации стилизованного компонента, и к нему не привязаны стили. Имя будет одинаковым для всех экземпляров. В примере статический класс — sc-gsnTZi
.
Имя динамического класса может быть разным для каждого экземпляра в зависимости от результата интерполяции. В примере динамический класс — gDYWIg
, который определяет стили.
Пример селектора &.green
Для всех преимуществ styled-components
рекомендуется использовать styled-components
для стиля. Однако мы не можем избежать использования классов. Например, если мы используем стороннюю библиотеку, такую как Система проектирования Ant, будут классы, определенные библиотекой.
&
эффективен для обработки нескольких/вложенных классов. Селектор CSS, .class1.class2
, выбирает все элементы с классом, установленным как class1
, так и class2
. Аналогично, &.class
выбирает сам стилизованный компонент с классом, установленным на class
.
Вот пример &.green
в src/App.js
:
В строках 8–10 селектор &.green
устанавливает для свойства CSS зеленый фон. Этот селектор соответствует элементу в строке 14.
Выполняем npm start
, и видим зеленый фон.
Вот окно проверки:
Внутри styled-components
генерирует классы sc-eCYdqJ
и gdGwCe
для Container
. .gdGwCe.green
и .gdGwCe
— это сгенерированные правила CSS.
Пример селектора & .green
Селектор CSS .class1 .class2
(с пробелом посередине) выбирает все элементы class2
, которые являются потомками элемента class1
. Аналогично, &. class
выбирает все class
элементы внутри определенного компонента стиля.
Вот пример &. green
в src/App.js
:
В строках 8–10 селектор &. green
устанавливает для свойства CSS зеленый фон. Этот селектор будет соответствовать элементу в строке 19.
Выполните npm start
, и мы увидим зеленый фон для P2.
Вот окно проверки:
Внутри styled-components
генерирует классы sc-hKMtZM
и jekZWP
для Container
. .jekZWP .green
и .jekZWP
— это сгенерированные правила CSS.
Пример селектора &&&&& .green
Специфика — это алгоритм, используемый браузерами для определения правила CSS, наиболее подходящего для элемента, которое, в свою очередь, определяет значение свойства, применяемое к элементу. Правило !important
можно использовать для повышения важности свойства/значения, чем обычно, но это чревато ошибками и, как правило, не очень хорошая идея.
Лучший способ переопределить стили с высокой специфичностью — увеличить количество указанных стилей. Поскольку каждый &
заменяется сгенерированным динамическим классом, высокая специфичность может быть достигнута путем повторения &
.
Вот пример &&&&& .green
в src/App.js
:
В строках 8–10 селектор &&&&&. green
устанавливает для свойства CSS зеленый фон. Этот селектор будет соответствовать элементу в строке 19.
Выполните npm start
, и мы увидим зеленый фон для P2. Пользовательский интерфейс выглядит так же, как и селектор, &. green
.
Однако окно проверки показывает разницу:
Внутри styled-components
генерирует классы sc-gsnTZi
и hFatIX
для Container
. .hFatIX.hFatIX.hFatIX.hFatIX.hFatIX .green
и .hFatIX
— это сгенерированные правила CSS.
Это достаточная конкретика?
Псевдоклассы
Псевдокласс — это ключевое слово, добавляемое к селектору, которое указывает особое состояние выбранного элемента (элементов). Например, :hover
обычно используется для выбора элемента при наведении на него указателя пользователя. Ниже приведен список псевдоклассов: :active
, :any-link
, :autofill
, :blank
(экспериментальный), :checked
, :current
(экспериментальный), :default
, :defined
, :dir()
(экспериментальный), :disabled
, :empty
, :enabled
, :first
, :first-child
, _109 _, :fullscreen
, :future
(опытный), :focus
, :focus-visible
, :focus-within
, :has()
(опытный), :host
, :host()
, :host-context
(опытный), :hover
, :indeterminate
, :in-range
, :invalid
, :is()
, :lang()
, :last-child
, _ 126_, :left
, :link
, :local-link
(экспериментальные), :not()
, :nth-child()
, :nth-col()
(опытный), :nth-last-child()
, :nth-last-col()
(опытный), :nth-last-of-type()
, :nth-of-type()
, :only-child
, :only-of-type
, :optional
, :out-of-range
, :past
(опытный), :picture-in-picture
, :placeholder-shown
, :paused
, _ 145_, :read-only
, :read-write
, :required
, :right
, :root
, :scope
, :state()
(опытный), :target
, :target-within
(опытный), :user-invalid
(опытный), :valid
, :visited, and :where()
.
Пример селектора &:hover
&
можно использовать для псевдоклассов. &:hover
выбирает сам стилизованный компонент с состоянием :hover
.
Вот пример &:hover
в src/App.js
:
В строках 8–10 селектор &:hover
устанавливает для свойства CSS зеленый фон. Этот селектор будет совпадать, когда указатель наводится на любой контент в Container
.
Выполните npm start
, и мы увидим зеленый фон, когда указатель наведется на Container
.
Вот окно проверки:
Внутри styled-components
генерирует классы sc-eCYdqJ
и zjyfz
для Container
. Когда выбрано состояние наведения, .zjyfz:hover
и .zjyfz
генерируются правила CSS.
Пример селектора & :hover
&: hover
выбирает стилизованный компонент-потомок с состоянием :hover
.
Вот пример & :hover
в src/App.js
:
В строках 8–10 селектор & :hover
устанавливает для свойства CSS зеленый фон. Этот селектор сработает, когда указатель наведется на дочернее содержимое Container
.
Выполните npm start
, и мы увидим зеленый фон, когда указатель наведется на P2.
Вот окно проверки:
Внутри styled-components
генерирует классы sc-bczRLJ
и iLhEec
для Container
. Когда выбрано состояние наведения, .iLhEec :hover
и .iLhEec
генерируются правила CSS.
Пример селектора & :is(div):hover
В любом месте селекторов можно использовать несколько псевдоклассов. & :is(div):hover
выбирает потомок стилизованного компонента, который является div
со состоянием :hover
.
Вот пример & :is(div):hover
в src/App.js
:
В строках 8–10 селектор & :is(div):hover
устанавливает для свойства CSS зеленый фон. Этот селектор будет сопоставлен, когда указатель наведется на потомка Container
div
.
Выполните npm start
, и мы увидим зеленый фон, когда указатель наведется на P1.
Вот окно проверки:
Внутри styled-components
генерирует классы sc-bczRLJ
и iQEDuO
для Container
. Когда выбрано состояние наведения div
, .iQEDuO is(div):hover
и .iQEDuO
генерируются правила CSS.
Псевдоэлементы
Псевдоэлемент CSS — это ключевое слово, добавляемое к селектору, которое можно использовать для стилизации определенной части выбранных элементов. Например, ::first-line
можно использовать для изменения фона первой строки абзаца. Псевдоэлемент добавляется после последнего простого селектора селектора.
Как правило, следует использовать двойное двоеточие (::
) вместо одинарного двоеточия (:
). Это отличает псевдоклассы от псевдоэлементов. Однако, поскольку в старых версиях спецификации W3C этого различия не было, большинство браузеров поддерживают оба синтаксиса для исходных псевдоэлементов.
Ниже приведен список псевдоэлементов: ::after
(:after
), ::backdrop
, ::before
(:before
), ::cue
, ::cue-region
, ::first-letter
(:first-letter
), ::first-line
(:first-line
), ::file-selector-button
, ::grammar-error
(экспериментальный), ::marker
, ::part()
, ::placeholder
, ::selection
, ::slotted()
, ::spelling-error
(экспериментальный) и ::target-text
(экспериментальный).
Псевдоклассы могут нацеливаться на элемент, когда он находится в определенном состоянии, как если бы мы добавили класс CSS для этого состояния в DOM. Псевдоэлементы действуют так, как будто мы добавили в DOM совершенно новый элемент, который можно стилизовать.
Пример селектора &::first-line
Псевдоэлемент ::first-line
применяет стили к первой строке блочного элемента.
Вот пример &::first-line
в src/App.js
:
В строках 8–10 селектор &::first-line
устанавливает для свойства CSS зеленый фон. Этот селектор применяется к первой строке Container
.
Выполняем npm start
, и видим зеленый фон первой строки.
Вот окно проверки:
Внутри styled-components
генерирует классы sc-gsnTZi
и jmHpQT
для Container
. .jmHpQT::first-line
и .jmHpQT
— это сгенерированные правила CSS.
Пример селекторов &::before и &::first-line
Псевдоэлемент ::before
создает первый дочерний элемент выбранного элемента. Он часто используется для добавления косметического содержимого к элементу со свойством content
. Он встроен по умолчанию.
Вот пример & ::before
и &::first-line
в src/App.js
:
В строках 8–10 селектор & ::before
создает первого потомка Container
, который будет отображаться как *
. Этот селектор применяется к элементам div
в строках 18–23 и 24–28.
В строках 11–13 селектор & ::first-line
устанавливает для свойства CSS зеленый фон. Этот селектор применяется к тексту первой строки потомков Container
— элементы div
в строках 18–23 и 24–28.
Выполняем npm start
, и мы видим содержимое before
и зеленый фон первой строки.
Вот окно проверки:
Внутри styled-components
генерирует классы sc-bczRLJ
и bvMpeg
для Container
. .bvMpeg
, .bvMpeg ::before
и .bvMpeg ::first-line
— это сгенерированные правила CSS.
Элементы
&
используется для обозначения всех экземпляров стилизованного компонента. Он действует аналогично элементам в селекторах CSS. Все правила CSS для элементов применимы к &
.
Пример селектора & div
Селектор CSS element1 element2
выбирает все element2
внутри element1
. Аналогично, & div
выбирает всех потомков компонента стиля div
.
Вот пример & div
в src/App.js
:
В строках 8–10 селектор & div
устанавливает для свойства CSS зеленый фон. Этот селектор будет соответствовать элементу в строке 19.
Выполните npm start
, и мы увидим зеленый фон для P2.
Вот окно проверки:
Внутри styled-components
генерирует классы sc-bczRLJ
и fdLUHb
для Container
. .fdLUHb div
и .fdLUHb
— это сгенерированные правила CSS.
Пример диапазона и селектора
span &
выбирает компоненты стиля, которые являются потомками span
.
Вот пример span &
in src/App.js
:
В строках 8–10 селектор span &
устанавливает для свойства CSS зеленый фон. Этому селектору будет соответствовать элемент в строках 27–29.
Выполняем npm start
, и видим зеленый фон для первого абзаца.
Вот окно проверки:
Внутри styled-components
генерирует классы sc-bczRLJ
и cqdwhw
для Container
. span .sc-bczRLJ
и .cqdwhw
— это сгенерированные правила CSS.
Пример селектора & + &
Селектор CSS, element1 + element2
, выбирает первое element2
, расположенное сразу после element1
. Аналогично, & + &
выбирает стилизованный компонент, который размещается сразу после того же стилизованного компонента.
Вот пример & + &
в src/App.js
:
В строках 8–10 селектор & + &
устанавливает для свойства CSS зеленый фон. Этот селектор будет соответствовать элементу Paragraph
в строке 28.
Выполняем npm start
, и видим зеленый фон для второго абзаца.
Вот окно проверки:
Внутри styled-components
генерирует классы sc-bczRLJ
и himWHV
для Container
. .sc-bczRLJ .sc-bczRLJ
и .himWHV
— это сгенерированные правила CSS.
Заключение
styled-components
— популярная библиотека для оформления приложений React. Он широко используется проектами React. Мы показали 12 примеров использования амперсанда. Надеюсь, это сделает ваш код чистым и эффективным.
Спасибо за прочтение.
Если вам интересно, ознакомьтесь с статьями о других стилизованных компонентах.