pantoken-root / css-in-js

css-in-js ​

Compatibility ​

Target: Emotion CSS-in-JS. Current format: ThemeProvider SSR emits the Pantoken token variable. Minimum host version: 11.14.0. Tested through 11.14.0. Newer releases require review.

Full compatibility matrix

實驗性

@pantoken/css-in-js — 一個供執行時 CSS-in-JS 函式庫使用的 Instructure 主題物件。

與任何從 props.theme 讀取主題的函式庫相容 — Emotion、styled-components 以及 Stitches 都遵循此慣例。pantokenTheme 是現成的 rebrand 物件， 以 var() 為基礎，因此明/暗模式切換可經由 @pantoken/css 傳遞。toStyledTheme 可從任一 IR 建構 一個主題（也可使用 { resolve } 將具體值烘焙進去）。

範例 ​

styled-components

tsx
import { ThemeProvider } from "styled-components";
import { pantokenTheme } from "@pantoken/css-in-js";
<ThemeProvider theme={pantokenTheme}>...</ThemeProvider>;
// const Btn = styled.button`background: ${({ theme }) => theme.colorBackgroundBrand};`;

介面 ​

型別別名 ​

變數 ​

函式 ​

參考 ​

Mode ​

重新匯出 Mode

default ​

重新命名並重新匯出 pantokenTheme