前言
進到鐵人賽的第 21 天，繼續想下一篇的主題越來越不容易，可能之後的主題會較為零散，會想把我覺得好用的功能帶到。回想當初會想以　Chakra UI 為主題得起心動念，被朋友介紹這套 React UI 框架，正式我還是設計師剛接觸 React，覺得這套很簡單的就能實現設計稿上的樣式。不過中文文章介紹不多，有些冷門功能實作方式看官網或是討論區還是不是很懂，想藉由這次鐵人賽把自己採過的雷寫下來，也想把好好的運用各個功能(因為 Chakra UI 很彈性，一開始我都是直接改寫 props style)來實作設計系統。

Text

Text 渲染出來式 <p>
有關 text 的樣式設定只有是文字屬性相關的 Css 都可以直接在 props style 中完成設定，但還是會建議有重複性的，統一規劃好在 theme config 裡，可以參考之前的這篇 Text Styles 。
需要特地抽出來介紹的是 noOfLines 這個語法堂，它直接讓我們可以去指定多少行。相

<Text noOfLines={1} isTruncated>
   In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.
</Text>

isTruncated + noOfLines 可以完成指定第幾行省略效果 相當的方便

Input

Input 要注意的是， 類似 Button 元件有很多狀態可以設定樣式，在 theme config 中需要靠 _ 前綴來完成

 Input: {
      baseStyle: {
         field: {
            bg: "gray.700",
            color: "gray.300",
            _hover: {
              bg: "gray.500",
            },
            _focus: {
              borderColor: "gray.500",
            },
            // This does not work
            _autofill: {
              bg: "gray.500",
            }
         }
      }
    }

在元件 props style 上也可以

<Input  _focus={{borderColor:'red'}} />

特別是如果是特別只要針對 boder 也可以這樣寫

<Input
    focusBorderColor='pink.400'
    errorBorderColor='red.300'
  />

而如果是要改 placeholder 的樣式，使用 _placeholder 來完成

  <Input
    placeholder='email'
    _placeholder={{ opacity: 1, color: 'gray.500' }}
  />

Form Control

當如果你的表單中 input 是有完整 label 以及提示的話，會建議不要只使用獨立的 Input 和 Text 來完成，實作蠻推薦使用 Charka UI 設計好的一整組的 Form Control

FormControl 統一控制狀態包含 isInvalid、isDisabled、isRequired 提供給它底下的三個元件
FormLabel、FormHelperText、FormErrorMessage

這樣子狀態只要統一寫進 FormControl ，它就會影響底下的元件們，例如

// 這裡添加 isRequired 必填
<FormControl isRequired>
  <FormLabel>First name</FormLabel>
  <Input placeholder='First name' />
</FormControl>

// 這裡添加 isRequired 必填
<FormControl isRequired>
  <FormLabel>First name</FormLabel>
  <Input placeholder='First name' />
</FormControl>