介绍
material-ui
material-ui是一款React下的组件库,它支持绝大部分Material Design所定义的组件。相比其他的React组件库【比如antd,semantic-ui】,它有如下优势:
- 样式酷炫, 符合年轻人审美
- 定制化程度强
- 支持多种CSS写法,如
- JSS
- Styled-Components
- CSS Modules
- LESS
- SASS/SCSS
- 完善的Typescript支持
Typescript
Typescript是由微软开发的JavaScript的超集,同时借鉴了Java与C#的优点。相比JavaScript,它的优势在于:
- 静态类型检查,减少运行时错误
- 增强IDE的智能提示
- 强大的社区支持
- 空安全机制
Umi
umi,中文可发音为乌米,是一个由阿里开源的 react 应用框架。umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载。然后配以完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求,目前内外部加起来已有 50+ 的插件。它的主要特性在于:
- 📦 开箱即用,内置 react、react-router 等
- 🏈 类 next.js 且功能完备的路由约定,同时支持配置的路由方式
- 🎉 完善的插件体系,覆盖从源码到构建产物的每个生命周期
- 🚀 高性能,通过插件支持 PWA、以路由为单元的 code splitting 等
- 💈 支持静态页面导出,适配各种环境,比如中台业务、无线业务、egg、支付宝钱包、云凤蝶等
- 🚄 开发启动快,支持一键开启 dll 和 hard-source-webpack-plugin 等
- 🐠 一键兼容到 IE9,基于 umi-plugin-polyfills
- 🍁 完善的 TypeScript 支持,包括 d.ts 定义和 umi test
- 🌴 与 dva 数据流的深入融合,支持 duck directory、model 的自动加载、code splitting 等等
最佳实践
前期准备
安装umi脚手架
自行查看通过脚手架创建项目安装material-ui
自行查看安装 - Material-UI暴露HTML模板
UMI的HTML模板默认是隐藏的,需要在pages
下新建ejs
文件以暴露cd src/pages vim ./document.ejs
加入字体库和移动端支持
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My app</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <div id="root"></div> </body> </html>
修改tsconfig提升变成乐趣
Umi已经把大体的配置好了,可以再加入一些检查// tsconfig.json "noImplicitAny": true, //禁止隐式的any "noImplicitReturns": true, //禁止隐式的return "noImplicitThis": true, //禁止隐式的this "strictNullChecks": true //空安全检查
具体编码
改写styles的声明方式
无theme
const styles = createStyles({ // JSS code })
有theme
const styles = (theme: Theme) => createStyls({ // JSS code })
改写Props的声明方式
Props需要继承WithStyles这一泛型接口
interface Props extends WithStyles<typeof styles>{} /* ....... */ class Example extends React.Component<Props,State>{}
自定义主题
一般在顶层组件(umi下是
src/layouts/index.tsx
)下自定义主题即可// .......没法高亮,抱歉 const customizedTheme = createMuiTheme({ palette: { primary: blue, secondary: red, }, typography: { useNextVariants: true }, }) function Layout(props: Props){ return ( <MuiThemeProvider theme={customizedTheme}> {props.children} </MuiThemeProvider> ) } export default withStyles(styles,{withTheme: true})(Layout)
Attention!
不要使用@material-ui/styles下的函数/组件,天坑警告
不要使用@material-ui/styles下的函数/组件,天坑警告
不要使用@material-ui/styles下的函数/组件,天坑警告
本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!