iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
自我挑戰組

Material UI in React 系列

Material UI 的應用,由於工作的關係有接觸到使用該套件,發現中文文章的資源很少,來來回回在stackOverflow穿梭各個版本還有套件相容的問題,也想順便紀錄一下自己對這個Framework的認知,也希望能幫助大家快速理解這個Framework的應用。

鐵人鍊成 | 共 30 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文
DAY 21

Material UI in React [ Day 21 ] Data Display (part 1) 頭像 & 標籤

這個章節會從我們前面常常使用的 Typography 開始講解。 Typography 他是一個整合文字的 tag,一次過多的字體大小和样式會破壞任何佈局。排版...

2021-09-22 ‧ 由 LucianoLee 分享
DAY 22

Material UI in React [Day 22] Data Display (part 2) 分隔線 & 列表

今天會接續昨天未講解的部分往下... Divider 其實他就是分隔線而已,跟 hr tag 是差不多的,文件上的範例其實大多我都用 border 來處理,當然...

2021-09-23 ‧ 由 LucianoLee 分享
DAY 23

Material UI in React [Day 23] Data Display (part 3) 表格 & 提示

Table 這個套件其實跟原生的 table tag 沒什麼太大的差異,在官方文件中有用到 Data Grid,的部分需要再安裝 Lab,但我用起來還是覺得他們...

2021-09-24 ‧ 由 LucianoLee 分享
DAY 24

Material UI in React [Day 24] Utils 工具組

Click away listener 用於檢測點擊事件是否發生在元素之外,它可以監聽文檔中某處發生的點擊事件。和之前部分的組件有 onClose 的屬性一樣,...

2021-09-25 ‧ 由 LucianoLee 分享
DAY 25

Material UI in React [ Day 25 ] Styles Advanced

今天要講解的內容,在前面講解theme的應用時,有稍微講解了一些基本的應用,官方文件內前半部的內容我就不再提及了,我們會從 Overriding styles...

2021-09-26 ‧ 由 LucianoLee 分享
DAY 26

Material UI in React [ Day 26 ] Styles API (part 1)

API 今天來釐清 @material-ui/core/styles 的 API。 createGenerateClassName([options]) =&g...

2021-09-27 ‧ 由 LucianoLee 分享
DAY 27

Material UI in React [ Day 27 ] Styles API (part 2)

StylesProvider 他和 Theme Provider 很像,其實就是用 context 在傳遞樣式 object 的方法。 import React...

2021-09-28 ‧ 由 LucianoLee 分享
DAY 28

Material UI in React [ Day 28 ] Customization Component 自訂組件 (part1)

由於組件可以在不同的context中使用,有幾種方法可以解決這個問題,官方連結。 1.一次性情況的特定變化 2.一次性情況的動態變化 3.在不同context...

2021-09-29 ‧ 由 LucianoLee 分享
DAY 29

Material UI in React [ Day 29 ] Customization Component 自訂組件 (part2)

...接續前一篇 2.一次性情況的動態變化 在上一篇中講解如何覆蓋 Material-UI 組件的樣式,現在,讓我們看看如何使這些覆蓋動態化。這裡有五種選擇;每...

2021-09-30 ‧ 由 LucianoLee 分享
DAY 30

Material UI in React [ Day 30 ] 總結

今天是參賽的最後一天,至此已經講解完側邊欄位的內容了,之後會再整理每一章節的範例在 code sand box 上面。 這次是小弟第一次參賽,可能排版跟講解的部...

2021-10-01 ‧ 由 LucianoLee 分享