Định kiểu

Tạo kiểu cho component bằng tiện ích className hoặc prop có kiểu. Ứng dụng Text.js không có stylesheet.

#Tiện ích

className nhận tiện ích theo kiểu Tailwind. Một đơn vị tương ứng với một ô.

<Box className="flex-row gap-2 p-1 border rounded">  <Box className="flex-col grow border rounded px-1 bg-surface">    <Text bold>p-1 · gap-2</Text>    <Text color="muted">1 unit = 1 cell</Text>  </Box>  <Box className="flex-col grow border rounded px-1 border-accent">    <Text color="accent">border-accent</Text>  </Box></Box>

#Prop có kiểu

Mỗi tiện ích có một prop tương ứng. Prop có độ ưu tiên cao hơn className.

<Box flexDirection="column" padding={1} border="rounded" borderColor="accent">  <Text bold>Typed props</Text></Box>

#Màu sắc

Dùng mã hex, tên màu Tailwind hoặc token của theme như fg, muted, surface, accent, success và danger. Token tuân theo theme đang dùng.

#Theme

Có sẵn năm cấu hình: geistDark, geistLight, opencodeDark, tokyoNight và amberCrt.

<ThemeProvider theme="amberCrt">  <Box className="border rounded p-1">    <Text color="accent">amberCrt</Text>  </Box></ThemeProvider>

const brand = createTheme({ id: "brand", name: "Brand", accent: "#ffffff" }, "geistDark");

#Viewport thích ứng

Theo mặc định, ứng dụng lấp đầy console DevTools đang gắn vào cửa sổ trình duyệt (viewport.responsive) và đổi kích thước khi bạn kéo bảng. Sắp xếp layout bằng flex và đọc kích thước khi cần:

const { cols } = useViewport();const sidebar = cols >= 90;

Trang chỉ nhận biết bảng đang gắn vào cửa sổ trình duyệt. Trang không nhận biết DevTools tách riêng, mức thu phóng DevTools và thanh bên của console, nên ứng dụng dùng viewport.width × viewport.height (mặc định là 120×36) hoặc kích thước bạn cố định:

text.resize(120, 36)   // pin a sizetext.responsive(true)  // fit the console again