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

Whakamātautau

@pantoken/css-in-js — he tūnga kaupapa Instructure mō ngā whare pukapuka CSS-in-JS hei whakamahi i te wā whakahaere.

Ka mahi tahi ki ngā whare pukapuka katoa e pānui ana i tētahi kaupapa mai i props.theme — ko Emotion, styled-components, me Stitches e whakamahia ana taua tikanga. Ko pantokenTheme te tūnga rebrand kua oti kē, ā, he tautoko var() kia rere te whakawhitinga mārama/pango mā @pantoken/css. Ka hanga e toStyledTheme tētahi mai i tētahi IR (ā, ka taea hoki te horoi/tāpae i ngā uara konkreti mā { resolve }).

Tauira ​

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};`;

Ngā Atanga ​

Ngā Ingoa Momo ​

Ngā Taipūtī ​

Ngā Mahi ​

Ngā Tohutoro ​

Mode ​

Ka kaweake anō i Mode

default ​

E huri-ingoa ana, e whakahoki anō i te pantokenTheme