How to extends material-ui component

Question

I want to exetend Tab component with es6 class like this:

import React from "react";

import {Tab} from "material-ui";

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

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

}

export default MyTab;

But i get an error:

Uncaught TypeError: Cannot read property 'muiTheme' of undefined

What am I doing wrong?

Answer 1

The correct way to extend an MUI component is using their withStyles() higher-order component Design Approach

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); 

Answer 2

Currently it seems to require a 'getInitialState' function even if you are working in ES6. So just add one (and ignore the errors) for now.

import ThemeManager from 'material-ui/lib/styles/theme-manager';
import LightTheme from 'material-ui/lib/styles/raw-themes/light-raw-theme';

getInitialState() {
    return this.state;
}

I also set this state in the constructor ala ES6 React.

this.state = {muiThem : ThemeManager.getMuiTheme(LightThem),};