【react表格組件】material-table 基本用法 & 組件override

教程：

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）