Material UI

2021/07/23 (新增連結)
2021/10/20 (更新內容)

安裝

Material Design是Google開發的設計語言，Material-UI就是一些Material Design的react模組/元件。各位可以使用過去慣用的Bootstrap，在react裡，可以使用React Bootstrap 。不過，我們課程帶大家使用Material-UI。目前的版本是4.11.1，第五版已經正式推出了(2021/9/16)....。

• What’s New in Material-UI Version 5 (以下尚未修改為5.0.0)

在Material-UI的官網有安裝說明，我們直接使用npm指令安裝 ：

// 用npm安装 (5.x)

npm install @mui/material @emotion/react @emotion/styled

4.11.1的安裝方式

// 用npm安装

npm install @material-ui/core

• 在Functional Component 介紹在List、ListItem 、ListItemText。

• 在Form 介紹Dialog、Input 、TextField、Button 、FAB、Icons 、IconButton API 、Material Icons

• 在Routing 介紹AppBar、Toolbar及 Themes

• 在Firebase with React 介紹 Progress

• 在Authentication 介紹TextField

• 在Storage 介紹Image list

參考資料

• 5 React Material UI Features You Might Have Missed

  • Automatic color changes

  • Interoperability

  • Switch Between RTL and Non-RTL

  • Integration with Design Kits (paid feature)

    • Figma

    • Sketch

    • Adobe XD

  • Unstyled components

    • Unstyled components by Material UI is an upcoming feature

• Improve UX With the Skeleton Component in React and Material-UI