स्टाइलिंग

className यूटिलिटी या टाइप्ड प्रॉप्स से कंपोनेंट को स्टाइल करें। Text.js ऐप्स में स्टाइलशीट नहीं होती हैं।

#यूटिलिटी

className में Tailwind जैसी यूटिलिटी इस्तेमाल होती हैं। एक यूनिट एक सेल के बराबर है।

<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>

#टाइप्ड प्रॉप्स

हर यूटिलिटी का एक प्रॉप होता है। प्रॉप्स को className से ज़्यादा प्राथमिकता मिलती है।

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

#रंग

हेक्स, Tailwind नाम या fg, muted, surface, accent, success और danger जैसे थीम टोकन इस्तेमाल करें। टोकन सक्रिय थीम के अनुसार बदलते हैं।

#थीम

पांच प्रीसेट पहले से शामिल हैं: geistDark, geistLight, opencodeDark, tokyoNight और 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");

#रिस्पॉन्सिव व्यूपोर्ट

ऐप्स डिफ़ॉल्ट रूप से डॉक किए गए DevTools कंसोल को भरते हैं (viewport.responsive), और पैनल को ड्रैग करने पर उनका आकार बदलता है। flex से लेआउट बनाएं और ज़रूरत पड़ने पर आकार पढ़ें:

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

पेज सिर्फ़ डॉक किए गए पैनल को देख सकता है। अनडॉक किए गए DevTools, DevTools ज़ूम और कंसोल साइडबार उसे दिखाई नहीं देते, इसलिए ऐप viewport.width × viewport.height (डिफ़ॉल्ट 120×36) या आपके पिन किए गए आकार का इस्तेमाल करता है:

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