如何扩展material-ui组件

Question

我想用es6 类扩展Tab组件，如下所示：

import React from "react";

import {Tab} from "material-ui";

class MyTab extends Tab {
    constructor(props){
        super(props);
    }

    render(){
        return super.render();
    }

}

export default MyTab;

但我收到一个错误：

Uncaught TypeError: Cannot read property 'muiTheme' of undefined

我究竟做错了什么？

Answer 1

扩展 MUI 组件的正确方法是使用他们withStyles() 的高阶组件设计方法

import React, { Component } from "react";
import Tab from "@material-ui/core/Tab";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => {
  return ({
      myTab: {
        fontFamily: 'Courier New',
    });
}

class MyTab extends Component {

  render() {
    return (
      const {classes, ...other} = this.props
      <Tab {...other} className={classes.myTab} label="Home" />
   }
}

export default withStyles(styles)(MyTab);