gregnb / gregnb/mui-datatables
How to override styles per component without having multiple MuiThemeProvider's?
- Dominant language
- JavaScript
- Stars
- 2.7k
- Forks
- 906
- PR merge metrics
- No merged PRs in 30d
Description
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 (
} />
} />
)
}
}
```
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
}
}
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 | |
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.