CSS in-JS 框架的樣式編輯

在 Styles 標籤中，你可以複製風格規則的聲明，格式符合 JavaScript 格式，並準備好貼到 JavaScript 檔案中。 這包括由 CSS 在 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 函式定義的編輯風格規則

樣式窗格支援使用 CSS 物件模型 (CSSOM) API 建立的樣式。 許多 CSS in-JS 框架與函式庫底層使用 CSS 物件模型 API 來建構樣式。

你可以透過 CSSStyleSheet JavaScript 介面編輯新增的樣式，這是在使用 Shadow DOM 時建立並分發可重複使用的樣式的方式。 請參見 CSSStyleSheetCSS 物件模型中的介面 (CSSOM) 。

範例

在此範例程式碼中，樣式規則最初是透過呼叫 CSS 物件模型 (CSSOM) 函式來定義，然後再透過 樣式 窗格編輯樣式規則。 該 CSSStyleSheet 物件包含 CSSOM API，例如 insertRule()。 h1最初由CSSStyleSheet函式新增的樣式可以在 Styles 面板中編輯。

//Add CSS-in-JS button

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

此範例示範如何改變background由 CSS 物件模型函式insertRule()所新增樣式的屬性h1。 background顏色最初透過呼叫 CSS 物件模型函式來設定，然後可透過樣式面板將顏色從 pink 變更為 lightblue 。

試試這個功能，搭配 使用 CSS-in-JS 的範例。

什麼是 CSS-in-JS？

本節摘自部落格文章《 CSS-in-JS 在 DevTools 中的支援》。

以下是我們所說的 CSS in-JS，以及它與一般 CSS 的不同之處。 CSS in JS 的定義有些模糊。 廣義來說，這是一種使用 JavaScript 來管理 CSS 程式碼的方法。 例如，這可能代表 CSS 內容是用 JavaScript 定義的，最終的 CSS 輸出則由應用程式即時產生。

在 DevTools 的語境中， CSS-in-JS 指的是 CSS 物件模型 API 將 CSS 內容注入頁面。 一般 CSS 是以 或 <link> 元素注入<style>，並有靜態來源 (，例如 DOM 節點或網路資源) 。 相較之下，CSS-in-JS 通常沒有靜態來源。

這裡有一個特殊情況，元素的內容 <style> 可以透過使用 CSS 物件模型 API 更新，導致原始碼與實際的 CSS 樣式表不同步。

如果你使用任何 CSS in-JS 函式庫 (，如 styled-component、Emotion 或 JSS) ，函式庫可能會根據開發模式和瀏覽器，內建使用 CSS 物件模型 API 來注入樣式。

讓我們來看看一些範例，說明如何透過 CSS 物件模型 API 注入樣式表，類似某些 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];

DevTools 中的 CSS 支援

在 DevTools 中，處理 CSS 最常用的功能是 樣式 窗格。 在 Styles 面板中，你可以查看 CSS in-JS 規則適用於特定元素。 你也可以編輯 CSS in-JS 規則，並即時看到頁面上的變更。

樣式窗格支援 CSS 規則，你可以透過 CSS 物件模型 API 進行修改。 CSS in-JS 風格有時會被描述 為「構造型」，以表示這些風格是透過 Web API 建構而成。

本作品採用 創用CC 姓名標示4.0國際授權條款授權。