How to override styles per component without having multiple MuiThemeProvider's?

[taschetto]

Hi, guys.

I'm trying to create a MUIDataTable wrapper that works with both light and dark palettes. I'm trying to avoid using a MuiThemeProvider since my App.js already contains it.

class App extends Component {
  render() {
    const { classes } = this.props
    return (
      <MuiThemeProvider theme={getTheme(this.props.palette)}>
        <BrowserRouter>
          <Switch>
            <PrivateRoute path='/app' component={AppContainer} />
            <Route exact path='/login' component={LoginContainer} />
            <Route exact path='/' component={() => <Redirect to='/app' />} />
            <Route component={() => <ErrorContainer type={404} />} />
          </Switch>
        </BrowserRouter>
      </MuiThemeProvider>
    )
  }
}

So I'm trying to insert style overrides inside my custom component without success. I'm affraid I don't know how to do it without using MuiThemeProvider and createMuiTheme again inside my wrapper. Here's what I got:

import React, { Component } from 'react'

import classNames from 'classnames'
import { withStyles } from '@material-ui/core/styles'
import MUIDataTable from 'mui-datatables'

const styles = {
  overrides: {
    MUIDataTableHeadCell: {
      fixedHeader: {
        backgroundColor: 'inherit',
      }
    },
    MUIDataTableSelectCell: {
      fixedHeader: {
        backgroundColor: 'inherit',
      },
      checked: {
        color: `lightcoral !important`
      },
    },
    MUIDataTableToolbarSelect: {
      root: {
        backgroundColor: 'inherit',
      },
    },
  }
}

class CustomDataTable extends Component {
  render() {
    return <MUIDataTable className={classNames(this.props.styles)} {...this.props} />
  }
}

export default withStyles(styles)(CustomDataTable)

I with I could set styles overrides inside this component. Also, eventually I'll need to specify custom styles per "instance" of CustomDataTable (like custom column widths).

Thank you for you help.

Expected Behavior

The style overrides are applied to the component.

Current Behavior

The style overrides are not applied to the component.

Your Environment

Tech	Version
Material-UI	3.4.0
MUI-datatables	2.0.0-beta-38
React	16.6.0
browser	Chrome Version 69.0.3497.92 (Official Build) (64-bit)
etc

[gregnb]

hey @taschetto I am trying to understand the issue with using another MUI Provider? as it stands now that is how you can style this library

[ezescigo]

Any answer on this one? I need to override styles without using MuiThemeProviderand createMuiTheme