gregnb / gregnb/mui-datatables

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

Open
#272 2 comments 7 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.