CODEWITHSUNDEEP
reactjsmaterial-uijss
yossi
yossi

Reputation: 13315

how to customize react material ui next component

I am using Material UI next branch i want to use the table component and i want to change the style of the TableHead Component.

My idea was to wrap the TableHead with MyTableHead and add my own style to override the current style.

my code(based on this Composition):

import React from 'react';
import injectSheet from 'react-jss'
import {
    TableHead,
} from 'material-ui/Table';

const styles = {
   th: {        
        fontSize:'20px',        
    },    
}

const _MyTableHead = (props) => {
    return (
        <TableHead className={props.classes.th} {...props}>
            {props.children}
        </TableHead>
    );
};
_MyTableHead.muiName = 'TableHead'    
const MyTableHead = injectSheet(styles)(_MyTableHead);


export {MyTableHead}

This does not work:
1. my style is overrided by the original style
2. i get an error in the browser js console:

Warning: Unknown props sheet, classes on tag. Remove these props from the element. For details, see https://facebook.github.io/react/warnings/unknown-prop.html in thead (created by TableHead) in TableHead (at table.js:15) in _MyTableHead (created by Jss(_MyTableHead))

I think i am not doing it right, any idea ?

Upvotes: 0

Views: 2609

Answers (2)

Joseph Pung
Joseph Pung

Reputation: 129

Example Class from MUINext

Material UI regenerates new classes upon render, so you will never be able to override any one class with a preset class.

Their class name will look something like MuiRoot-tableHead-23. The last number is random. Find the specific class that is overriding your class, and then use

[class*=MuiRoot-tableHead]{
your css settings
}

If you have a theme file already setup, I'd suggest going with what yossi said. Otherwise, you can manually override it using this method.

Upvotes: 0

yossi
yossi

Reputation: 13315

The way to customize components in the next branch is not documented yet.
This is how it can be done:

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {createMuiTheme} from 'material-ui/styles/theme'
import Button from 'material-ui/Button';

const muiTheme = createMuiTheme({
  overrides:{
    MuiButton:{
      root:{
        fontSize: 20,
      }
    }
  }  
});

class Main extends React.Component {
  render() {
    // MuiThemeProvider takes the theme as a property and passed it down the hierarchy
    // using React's context feature.
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <Button raised>Default</Button>
      </MuiThemeProvider>
    );
  }
}

export default Main;

Upvotes: 4

Related Questions