#14 No-code 之旅 — 怎麽利用 Chakra UI 去做 React 元件客制化?

继续昨天的主题,该怎麽用 Chakra UI 做开发呢?现成的元件该怎麽去做客制化?专案有定设计系统 (design system),那怎麽跟 Chakra UI 结合呢?

Chakra UI

Style Props

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>

Gradient (渐层)

现在很流行的渐层设计,Chakra UI 也提供一些 gradient API,让我们可以快速写渐层。

  • linear(<direction>, <from>, <to>)
  • radial(<from>, <to>)
  • repeating-linearconic,等等其他渐层模式

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

像这样:
Text Gradient

Color Mode (Light / Dark Mode)

越来越多网站有提供 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>
    )
  }
}

Responsive

这应该是很多人很在意的功能,使用上也很简单,而且 Chakra UI 是采用 @media(min-width) 的方式,让画面是 mobile-first 的~ 内建有提供一些 breakpoints,不过我们也可以去做调整!基本上,写 responsive 元件有两种方法:

Array syntax

用 array (阵列) 定义 style props,像下面的例子,我们想要让 Box 的宽度跟着萤幕大小而改变:

<Box bg="red.200" w={[300, 400, 500]}>
  This is a responsive box
</Box>

所以

  • 当萤幕大於 0em 宽度会是 300px
  • 当萤幕大於 30em 宽度会是 400px
  • 当萤幕大於 48em 宽度会是 500px

更多的 breakpoints 可以看在这里

Object syntax

除了用 array 以外,我们也可以用 object (物件),好处是不需要按照顺序去设定 style props:

<Text fontSize={{ base: "24px", md: "40px", lg: "56px" }}>
  This is responsive text
</Text>

物件里的每一个 key 会对应到一个 breakpoint,例如 md 就是大於 48em 的时候,fontSize 字体大小会等於 40px

Chakra Factory

以上讲到怎麽用现成的元件去做客制,那如果我们想要从头刻一个元件该怎麽办呢?或是原本已经有的非 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

除了针对元件的客制化,我们也可以加一些 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 开发出来的喔。

祝大家明天上班上课愉快!

Live Demo

晚安 <3

看更多


<<:  Day14 - 使用 Kamigo 进行权限控管

>>:  第14车厢-点开看更多?tableRWD应用篇

技术移转:把顾问当哆啦许愿的日常

请顾问辅导撰写 ISMS 程序书 充份说明企业或机构需求与资安目标(SPEC开好、说清楚、讲明白) ...

Day22 ( 游戏设计 ) 小玛莉游戏机

小玛莉游戏机 教学原文参考:小玛莉游戏机 这篇文章会介绍如何使用「函式」、「逻辑判断」、「当按钮按下...

Day 8 规划用户的个资自主权

全球个资保护如雨後春笋般的出现,各国对於个资保护的意识更加积极主动,且也陆续参考GDPR进行个资隐私...

html 音量拉杆

今天来说要如何做出一个可以左右滑的拉杆,程序码范例如下 <input type="r...

[重构倒数第24天] - You should use Skeleton

前言 该系列是为了让看过Vue官方文件或学过Vue但是却不知道怎麽下手去重构现在有的网站而去规画的系...