教程:

https://mbrn.github.io/material-table/#/

https://material-ui.com/api/table/

github:

https://github.com/mbrn/material-table

material-table是使用material-ui实现的react表格组件

1、基本使用方法:在react项目中导入该组件直接使用

安装

npm install material-table --save

使用

import MaterialTable from 'material-table'

class APP extends Component{
render(){
return (
<div>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"></link> 注意,这个标签必须在<MaterialTable>标签旁引用
<MaterialTable>
...
</MaterialTable>
</div>
);
}
}

具体使用见:

https://www.npmjs.com/package/material-table

https://mbrn.github.io/material-table/#/

2、override组件

想要override material-table组件起因是因为material-table自带的toobar和checkbox是红色,并且没有提供修改这个样式的接口,而我想要改成蓝色。

方法就是首先到github上clone下来material-table源码:

https://github.com/mbrn/material-table

阅读material-table源码,发现material-table的实现原理是 MaterialTable类里面调用了MTableToolbar,MTableHeader,MTableBodyRow等类。

因此我们要修改material-table里的toobar和每一行的checkbox的话,所要做的工作:

首先就是继承MTableHeader、MTableBodyRow实现自己的MyMTableHeader、MyMTableBodyRow类,以实现MTableHeader、MTableBodyRow中checkbox颜色的修改;然后继承MaterialTable类实现自己的MyMaterialTable类;并在MyMaterialTable类中调用MTableToolbar、MyMTableHeader、MyMTableBodyRow类,如下黄底色部分:

(注:没有重写MTableToolbar是因为MTableToolbar使用了css in js,不需要override MTableToolbar就可以改变它的颜色,具体介绍见下面)

import React, { Component } from 'react';

import { withStyles } from '@material-ui/core/styles';
import MaterialTable from 'material-table';
import MTableToolbar from 'material-table/dist/m-table-toolbar'; import blue from '@material-ui/core/colors/blue';
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'
import { Checkbox, TableCell } from '@material-ui/core';
import MTableBodyRow from 'material-table/dist/m-table-body-row';
import MTableHeader from 'material-table/dist/m-table-header'; https://material-ui.com/customization/themes/ const myTheme = createMuiTheme({
palette: {
secondary:{
main: '#017FCB',
// main: blue[400],
// light: blue[400],
},
},
typography:{
useNextVariants: true,
},
}); // override MTableBodyRow to change the color of tablebody_checkbox
class MyMTableBodyRow extends MTableBodyRow{
renderSelectionColumn() {
return (
<TableCell padding="none" key="key-selection-column" style={{ width: 48 }}>
{/* use createMuiTheme & MuiThemeProvider to change the style of tablebody_checkbox */}
<MuiThemeProvider theme={myTheme}>
<Checkbox
checked={this.props.data.tableData.checked === true}
onClick={(e) => e.stopPropagation()}
value={this.props.data.tableData.id.toString()}
onChange={(event) => this.props.onRowSelected(event, this.props.path)}
style={{
paddingLeft: 12 + this.props.level * 20,
}}
/>
</MuiThemeProvider>
</TableCell>
);
}
} class MyTableHeader extends MTableHeader{
renderSelectionHeader() {
return (
<TableCell
padding="none"
key="key-selection-column"
style={this.props.headerStyle}
>
{/* use createMuiTheme & MuiThemeProvider to change the style of tableheader_checkbox */}
<MuiThemeProvider theme={myTheme}>
<Checkbox
indeterminate={this.props.selectedCount > 0 && this.props.selectedCount < this.props.dataCount}
checked={this.props.selectedCount === this.props.dataCount}
onChange={(event, checked) => this.props.onAllSelected && this.props.onAllSelected(checked)}
/>
</MuiThemeProvider>
</TableCell>
);
}
} // override MaterialTable to change toolbar & tablebody_checkbox & tableheader_checkbox
class MyMaterialTable extends MaterialTable{
getProps(props){
const calculatedProps=super.getProps(props);
// use css in js to change style of toolbar
// change the calculatedProps.components.Toolbar in MaterialTable.
// read the source code of material-table to get the variable name to change
calculatedProps.components.Toolbar=withStyles(styles)(MTableToolbar);
calculatedProps.components.Row=MyMTableBodyRow;
calculatedProps.components.Header=MyTableHeader;
return calculatedProps;
}
} // change the background color of toolbar
const styles = theme => ({
root: {
paddingRight: theme.spacing.unit
},
highlight:
theme.palette.type === 'light'
? {
color: theme.palette.secondary.main,
// backgroundColor: blue[100],
backgroundColor: '#98D3F2',
}
: {
color: theme.palette.text.primary,
backgroundColor: theme.palette.secondary.dark
},
spacer: {
flex: '1 1 10%'
},
actions: {
color: theme.palette.text.secondary,
},
title: {
flex: '0 0 auto'
},
searchField: {
paddingLeft: theme.spacing.unit * 2
}
}); export default MyMaterialTable;

对于继承MTableHeader和MTableBodyRow并修改其中的checkbox的样式,我们采用material-ui提供的theme进行修改:

theme使用教程:

https://material-ui.com/customization/themes/

theme使用实例:

对于不继承MTableToolbar,直接在MaterialTable中调用MTableToolbar时指定修改MTableToolbar的样式,我们使用css in js,见上面红字部分

个人认为通过withStyles()函数实现的css in js的优点:可以在子组件外部对子组件样式进行修改

css in js 优缺点:

看了这些框架后,可以发现CSS-in-JS的优势还是挺多的:

  • 因为有了生成的唯一class名称,避免了全局污染的问题
  • 唯一的class名称也解决了命名规则混乱的问题
  • JavaScript和CSS之间可以变量共享,比如一些基础的颜色和尺寸,这样再当需要在JavaScript里计算一些高度的时候,可以取到和dom相关的一些padding,margin数值,统一管理
  • 只生成页面需要用到的代码,缩减了最终包的大小,提升了性能
  • CSS的单元测试增加了样式重构的安全性

但是CSS-in-JS也存在着一些不足和争议:

  • 有些观点觉得JS和CSS的关系没这么近,把CSS写进JS里引入了新的一套依赖,增加了复杂度,新人加入项目后需要学习的东西就更多了,也让学习曲线更加陡了
  • 对前端框架确实有些依赖性,更适合于组件化的框架,如React等
  • Debug的时候需要花更多的功夫才能找到对应的样式代码
  • 覆盖第三方插件样式时会有权重不够的问题
  • Lint工具对于JavaScript内部的CSS代码样式支持的还不够

作者:ThoughtWorks中国
链接:https://www.jianshu.com/p/cefd3ae73255
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

注意调用父类方法的语法:

调用父类构造方法:

super();

调用父类一般方法:

super.fatherfunc();

(另推荐一个组件 docz)

【react表格组件】material-table 基本用法 & 组件override的更多相关文章

  1. 基于React Native的Material Design风格的组件库 MRN

    基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...

  2. Griddle, griddle-react 一个REACT 表格组件

    Griddle, griddle-react 一个REACT 表格组件: http://griddlegriddle.github.io/Griddle/index.html

  3. Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

  4. Bootstrap表格组件 Bootstrap Table

    Bootstrap Table是Bootstrap的一个组件 Bootstrap Table Demo:http://issues.wenzhixin.net.cn/bootstrap-table/i ...

  5. react第七单元(组件的高级用法-组件的组合(children的用法)-高阶组件-封装组件)

    第七单元(组件的高级用法-组件的组合(children的用法)-高阶组件-封装组件) #受控组件 简而言之,就是受到状态state控制的表单,表单的值改变则state值也改变,受控组件必须要搭配onc ...

  6. react初探(二)之父子组件通信、封装公共组件

    一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...

  7. Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍

    Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...

  8. 【共享单车】—— React后台管理系统开发手记:UI菜单各个组件使用(Andt UI组件)

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  9. 链接进入react二级路由,引发的子组件二次挂载

    这个问题很怪,我两个二级路由从链接进入的时候,会挂载两次子组件. 从链接进入,是因为新页面在新标签页打开的. 有子组件是因为公共组件提取 同样的操作,有一些简单的二级路由页面,就不会挂载两次. 讲道理 ...

随机推荐

  1. Git和Repo管理使用简要介绍

    在Linux平台下进行Android系统项目开发时,需要Git或repo管理. 一. Git和Repo的区别: 1. Git:Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的 ...

  2. FreeRtos——任务删除,改变任务优先级

    以下转载自安富莱电子: http://forum.armfly.com/forum.php vTaskDelete() API 函数任务可以使用 API 函数 vTaskDelete()删除自己或其它 ...

  3. hdu3457(有向图的dp问题)

    同http://www.cnblogs.com/ziyi--caolu/p/3202511.html #include<iostream> #include<stdio.h> ...

  4. vim 笔记

    1.替换 :s/vivian/sky/ 替换当前行第一个 vivian 为 sky :s/vivian/sky/g 替换当前行所有 vivian 为 sky :%s/vivian/sky/(等同于 : ...

  5. 本系列love2d示例代码错误集中整理

    3.输入和音乐 音乐不是循环播放的,可以在love.audio.play(music) 之前添加music:setLooping(true)

  6. 干接点&湿接点

    干接点的定义: 无源开关:具有闭合和断开的2种状态:2个接点之间没有极性,可以互换: 常见的干接点信号有: 1.各种开关如:限位开关.行程开关.脚踏开关.旋转开关.温度开关.液位开关等: 2.各种按键 ...

  7. linux查看端口命令和kill

    1.查看  netstat -atunlp 2kill:kill -9 PID

  8. 关于Unity的组件和作用

    一.Transform组件 整个场景由节点树组成. 节点+Transform组件,每个Transform有自己的孩子Transform,由Transform组成Transform树,而每个Transf ...

  9. php -- memcached 内存缓存

    一.memcached 简介 在很多场合,我们都会听到 memcached 这个名字,但很多同学只是听过,并没有用过或实际了解过,只知道它是一个很不错的东东.这里简单介绍一下,memcached 是高 ...

  10. ES5与ES6的继承

    JavaScript本身是一种神马语言: 提到继承,我们常常会联想到C#.java等面向对象的高级语言(当然还有C++),因为存在类的概念使得这些语言在实际的使用中抽象成为一个对象,即面向对象.Jav ...