Редактирование стилей для платформ CSS-in-JS

  • Статья

На вкладке Стили можно скопировать объявления для правила стиля таким образом, чтобы он был отформатирован для JavaScript и готов к вставке в файл JavaScript. Сюда входят правила стиля, определенные вызовами функций CSS-in-JS. Вы также можете изменять правила стиля, которые изначально были определены вызовом функции CSS-in-JS.

Копирование объявлений правил стилей для их вставки с помощью синтаксиса JavaScript

В области Стили можно скопировать объявления для правила стиля таким образом, чтобы он был отформатирован для JavaScript и готов к вставке в файл JavaScript.

При использовании библиотек CSS-in-JS можно скопировать объявления CSS (свойство и значение CSS), чтобы они автоматически форматировались для JavaScript. Вам не нужно вручную изменять скопированный CSS в соответствии с синтаксисом JavaScript. Вы можете скопировать одно объявление CSS или все объявления в правиле стиля, а затем вставить их непосредственно в файл JavaScript без проблем с синтаксисом.

Чтобы скопировать правило стиля как JavaScript, выполните следующие действия:

  1. В DevTools откройте инструмент Элементы и перейдите на вкладку Стили .

  2. Щелкните правой кнопкой мыши объявление в правиле стиля и выберите Копировать объявление как JS или Копировать все объявления как JS.

  3. Вставьте скопированный CSS-файл в файл JavaScript в текстовом редакторе, например Visual Studio Code. Пример: '--more-link': 'lime'.

    Контекстное меню для правила стиля, включая команды

Дополнительные сведения о просмотре и изменении CSS см. в справочнике по функциям CSS.

Изменение правил стиля, изначально определенных функцией CSSOM

Панель "Стили" поддерживает редактирование стилей, созданных с помощью API-интерфейсов CSS Object Model (CSSOM). Многие платформы и библиотеки CSS-in-JS используют API объектной модели CSS для создания стилей.

Вы можете изменять стили, добавленные в JavaScript, с помощью CSSStyleSheet интерфейса , который является способом создания и распространения повторно используемых стилей при использовании Теневой модели DOM. См. раздел Интерфейс CSSStyleSheet в объектной модели CSS (CSSOM).

Пример

В этом примере кода правила стиля сначала определяются путем вызова функции CSS Object Model (CSSOM), а затем правила стиля редактируются с помощью области Стили . Объект CSSStyleSheet содержит API CSSOM, например insertRule(). Стили h1 , которые были изначально добавлены CSSStyleSheet функцией, затем можно редактировать в области Стили .

//Add CSS-in-JS button

function addStyle() {
  const sheet = new CSSStyleSheet();
  sheet.insertRule(`h1 {
    background: pink;
    text-transform: uppercase;
  }`);
  document.adoptedStyleSheets = [sheet];
}

В этом примере показано изменение background свойства стилей h1 , добавленных функцией insertRule()объектной модели CSS . Цвет background сначала задается путем вызова функции объектной модели CSS, а затем его можно изменить с pinklightblue на с помощью области Стили .

Изменение свойства фона стилей h1, добавленных с

Попробуйте эту функцию с помощью примера, в котором используется CSS-in-JS.

Что такое CSS-in-JS?

Этот раздел является фрагментом из записи блога о поддержке CSS-in-JS в DevTools.

Вот что мы имеем в виду под CSS-in-JS и чем он отличается от обычного CSS. Определение CSS-in-JS несколько расплывчато. В широком смысле это подход к управлению кодом CSS с помощью JavaScript. Например, это может означать, что содержимое CSS определяется с помощью JavaScript, а конечные выходные данные CSS создаются приложением на лету.

В контексте средств разработки CSS-in-JS означает, что содержимое CSS внедряется на страницу с помощью API объектной модели CSS. Обычный CSS внедряется с помощью <style> элементов или <link> и имеет статический источник (например, узел DOM или сетевой ресурс). Напротив, CSS-in-JS часто не имеет статического источника.

Особый случай здесь заключается в том, что содержимое <style> элемента может быть обновлено с помощью API объектной модели CSS, что приводит к тому, что источник перестает синхронизироваться с фактической таблицей стилей CSS.

Если вы используете любую библиотеку CSS-in-JS (например, styled-component, Emotion или JSS), библиотека может внедрять стили с помощью API объектной модели CSS в зависимости от режима разработки и браузера.

Давайте рассмотрим некоторые примеры того, как можно внедрить таблицу стилей с помощью API объектной модели CSS, аналогичному подходу, используемому некоторыми библиотеками CSS-in-JS.

// Insert new rule to an existing CSS stylesheet
const element = document.querySelector('style');
const stylesheet = element.sheet;
stylesheet.replaceSync('.some { color: blue; }');
stylesheet.insertRule('.some { color: green; }');

Вы также можете создать совершенно новую таблицу стилей:

// Create a completely new stylesheet
const sheet = new CSSStyleSheet();
stylesheet.replaceSync('.some { color: blue; }');
stylesheet.insertRule('.some { color: green; }');

// Apply constructed stylesheet to the document
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

Поддержка CSS в средствах разработки

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

Панель Стили поддерживает правила CSS, которые можно изменить с помощью API объектной модели CSS. Стили CSS-in-JS иногда описываются как созданные, чтобы указать, что эти стили были созданы с помощью веб-API.

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Оригинальная страница находится здесь и автор Алекс Руденко (Технический писатель, Chrome DevTools & Lighthouse).

Creative Commons License Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.