hyojin / material-ui-datatables

An another React Data tables component.
MIT License
165 stars 58 forks source link

theme or something not working #59

Open eromoe opened 7 years ago

eromoe commented 7 years ago

First, I don't know why I have to add

  static childContextTypes =
  {
      muiTheme: React.PropTypes.object
  }

  getChildContext()
  {
      return {
          muiTheme: getMuiTheme()
      }
  }

to

class TagTable extends Component {

  render() {

    const {data} = this.props;

    return (
      <MuiThemeProvider>
        <DataTables
          height={'auto'}
          selectable={false}
          showRowHover={true}
          showHeaderToolbar={true}
          showFooterToolbar={true}
          columns={TABLE_COLUMNS}
          data={data}
          showCheckboxes={false}
          onCellClick={this.handleCellClick}
          onCellDoubleClick={this.handleCellDoubleClick}
          onFilterValueChange={this.handleFilterValueChange}
          onSortOrderChange={this.handleSortOrderChange}
          page={1}
          count={100}
        />
      </MuiThemeProvider>
    );
  }
}

Or it would complain

Uncaught TypeError: Cannot read property 'baseTheme' of undefined
    at getStyles (DataTables.js?7f0e:96)
    at DataTables.render (DataTables.js?7f0e:298)
    at eval (ReactCompositeComponent.js:795)
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (

Even if I add theme, can not work well : once click a button, the button would be masked by a gray layer.

image

hyojin commented 7 years ago

@eromoe I'm not sure where you defined the code related to theme (like, getMuiTheme() function). How about to pass theme as a prop?

http://www.material-ui.com/#/customization/themes

coding2012 commented 6 years ago

@hyojin Thanks that fixed my issue - I was getting the same exact error. Added this to my app.tsx: import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import getMuiTheme from 'material-ui/styles/getMuiTheme';

And this is just inside my router element: