material-ui-datatables icon indicating copy to clipboard operation
material-ui-datatables copied to clipboard

theme or something not working

Open eromoe opened this issue 8 years ago • 2 comments
trafficstars

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

eromoe avatar Sep 05 '17 08:09 eromoe

@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

hyojin avatar Sep 07 '17 23:09 hyojin

@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: <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>

coding2012 avatar Oct 31 '17 14:10 coding2012