繼續昨天的主題，該怎麼用 Chakra UI 做開發呢？現成的元件該怎麼去做客製化？專案有定設計系統 (design system)，那怎麼跟 Chakra UI 結合呢？
Chakra UI 提供的元件都會包含這些 style props，什麼東西？就是一般的 React component props，可是他的用途是加一些 CSS styling 到元件上，而這些 props 的命名都很簡單，如果大家已熟悉 Tailwind CSS 的話，一定很快就會用這些 style props。
import { Box, Flex } from "@chakra-ui/react"
// m={2} 代表把 margin 設成 `theme.space[2]`，也就是 2 * 4px
<Box m={2} maxW="960px">Tomato</Box>
// display: flex, align-items: center, 和 justify-content: space-between
<Box display="flex" alignItems="center" justifyContent="space-between">
Box with Flex props
</Box>
// 上面的元件可以直接用 Flex 元件來代替 `<Box display="flex" />`
<Flex align="center" justify="center">
Flex Container
</Flex>
現在很流行的漸層設計，Chakra UI 也提供一些 gradient API，讓我們可以快速寫漸層。
linear(<direction>, <from>, <to>)
radial(<from>, <to>)
repeating-linear，conic，等等其他漸層模式除了 background 相關的 API 之外，也不忘記 text gradient，就是讓文字加上漸層～
import { Text } from "@chakra-ui/react"
<Text
bgGradient="linear(to-l, #7928CA, #FF0080)"
bgClip="text" // background-clip: text
fontSize="6xl" // font-size: theme.fontSizes.6xl => 3.75rem
fontWeight="extrabold" // font-weight: theme.fontWeights.extrabold => 800
>
Welcome to Chakra UI
</Text>
像這樣：
越來越多網站有提供 dark mode 了，而 Chakra UI 內建支援 color mode 管理喔！Chakra UI 會把使用者設定的 color mode 存到瀏覽器的 localStorage，讓使用者下一次來到網站的時候，網站會採取之前設定好的模式。想要使用 color mode 的話，必須加這些程式：
// theme.js
import { extendTheme } from "@chakra-ui/react"
const config = {
initialColorMode: "light", // 設定預設的模式
useSystemColorMode: false, // 要不要跟著使用者系統的 color mode
}
// 把設定加進 theme 裡
const theme = extendTheme({ config })
export default theme
還有很重要的 ColorModeScript，這 script 會確保我們網站的 color mode 會持續跟 localStorage 同步，而這 script 一定要放在 body 之前或是如果用 Next.js 那要放在我們的 pages/_document.js 裡：
// pages/_document.js
import { ColorModeScript } from "@chakra-ui/react"
import NextDocument, { Html, Head, Main, NextScript } from "next/document"
import theme from "./theme"
export default class Document extends NextDocument {
render() {
return (
<Html lang="en">
<Head />
<body>
// body 裡的第一個～
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<Main /> // 這是我們的 App！
<NextScript />
</body>
</Html>
)
}
}
這應該是很多人很在意的功能，使用上也很簡單，而且 Chakra UI 是採用 @media(min-width) 的方式，讓畫面是 mobile-first 的～ 內建有提供一些 breakpoints，不過我們也可以去做調整！基本上，寫 responsive 元件有兩種方法：
用 array (陣列) 定義 style props，像下面的例子，我們想要讓 Box 的寬度跟著螢幕大小而改變：
<Box bg="red.200" w={[300, 400, 500]}>
This is a responsive box
</Box>
所以
更多的 breakpoints 可以看在這裡～
除了用 array 以外，我們也可以用 object (物件)，好處是不需要按照順序去設定 style props：
<Text fontSize={{ base: "24px", md: "40px", lg: "56px" }}>
This is responsive text
</Text>
物件裡的每一個 key 會對應到一個 breakpoint，例如 md 就是大於 48em 的時候，fontSize 字體大小會等於 40px。
以上講到怎麼用現成的元件去做客製，那如果我們想要從頭刻一個元件該怎麼辦呢？或是原本已經有的非 Chakra 元件，該怎麼做？Chakra UI 有提供叫做 Chakra Factory，讓任一個元件也可以有 style props 方便去做客製：
<chakra.button
px="3"
py="2"
bg="green.200"
rounded="md"
_hover={{ bg: "green.300" }}
>
Click me
</chakra.button>
我們可以用 chakra.<element> 然後 <element> 為 HTML element 開發全新的元件。或是我們也可以用 Chakra factory function 去把其他元件 Chakra-化：
// AnotherCard 是個 React 元件
const AwesomeCard = chakra(AnotherCard, {
baseStyle: {
shadow: "lg",
rounded: "lg",
bg: "white",
},
})
除了針對元件的客製化，我們也可以加一些 Global Styles，就是對整個 HTML 加一些 CSS styling，例如設定字體～
const theme = {
styles: {
global: {
"html, body": {
color: "gray.600",
lineHeight: "tall",
fontFamily: "'Open Sans', Helvetica Neue, sans-serif",
},
a: {
color: "teal.500",
},
},
},
}
別忘記把上面的 theme 加進 ChakraProvider 裡喔～
大家本來就知道 Chakra UI 嗎？覺得如何呢？個人覺得真的好用！因為他提供蠻多元件可以直接拿來用，而且還有像 Tailwind CSS 的那種 style props 方式，讓客製化變得簡單一些～ 想看 Chakra UI 的簡介和比較可以看這篇！
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 不過這專案不是用 Chakra UI 開發出來的喔。
祝大家明天上班上課愉快！
晚安 <3
iThome鐵人賽
看影片追技術