Material-table: Add support for className

[mviens]

Is your feature request related to a problem? Please describe.
While there is support for <MaterialTable style={{}} ... />, there does not seem to be support for <MaterialTable className={} ... />.

Describe the solution you'd like
I want to be able to define a CSS class name using <MaterialTable className={classes.myTable} ... /> or <MaterialTable className='myTable' ... />..

Describe alternatives you've considered
Wrapping the <MaterialTable /> in a <div> and using CSS to find it that way (hacky).

[pak11273]

So we don't bloat the codebase, there is no need to add a className since we can already style material table with either style or by overriding the Container component like this:

<MaterialTable Container: props => ( <div style={{ ... }}> <div {...props} /> </div> ) </MaterialTable>

[sabbin]

@pak11273

I'm trying to style the MTableToolbar component, with the style, as the following. I want to remove the padding from the toolbar but it doesn't seem to work.

components={{
  Container: props => (
    <Paper elevation={0} {...props} />
  ),
  Toolbar: props => (
    <MTableToolbar {...props} style={{ padding: 0 }} />
  )
}}

What is the correct way of doing this?

[pak11273]

Create a styling wrapper either outside or inside the Toolbar:

components={{ Container: props => ( <Paper elevation={0} {...props} /> ), Toolbar: props => ( <div style={{padding: 0}} > <MTableToolbar {...props} /> </div> ) }}

[sabbin]

Thanks for the response, I tried that but that actually wraps the Toolbar inside a div which has padding:0. It does not apply the padding prop to the MToolbar component.

The result is the following

<div style="padding: 0px;">
    <div class="class="MuiToolbar-root MuiToolbar-regular MTableToolbar-root-420 MuiToolbar-gutters">...</div>
</div>

I need to remove the padding from the child div, in this case the MuiToolbar-root

[pak11273]

Do it inside the Toolbar as shown in the documentation:

components={{ Toolbar: props => ( <div> <MTableToolbar {...props} /> <div style={{padding: '0px 10px'}}> <Chip label="Chip 1" color="secondary" style={{marginRight: 5}}/> <Chip label="Chip 2" color="secondary" style={{marginRight: 5}}/> <Chip label="Chip 3" color="secondary" style={{marginRight: 5}}/> <Chip label="Chip 4" color="secondary" style={{marginRight: 5}}/> <Chip label="Chip 5" color="secondary" style={{marginRight: 5}}/> </div> </div> ), }}

[sabbin]

That does not work either.. it just creates another div beside the <MTableToolbar/>

Look at the images below

I need to remove the padding from <div class="MuiToolbar-root MuiToolbar-regular MTableToolbar-root-420 MuiToolbar-gutters">...</div> not to add other <div> elements

[andriymiz]

You can override styles by withStyles().

const StyledMTableToolbar = withStyles({
  root: {
    paddingLeft: 0,
    paddingRight: 0,
  },
})(MTableToolbar);

components={{
  Toolbar: props => (
    <StyledMTableToolbar {...props} />
  )
}}

[loolooii]

So we don't bloat the codebase, there is no need to add a className since we can already style material table with either style or by overriding the Container component like this:

<MaterialTable
     Container: props => (
      <div style={{ ... }}>
        <div {...props} />
      </div>
    )
</MaterialTable>

Sorry, but this is simply not true. Your solution also "bloats" the codebase and is actually worse. What you're suggesting is to add a div element just to remove the padding. React components should have className, period. This is just a matter of passing a prop.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[v-excelsior]

Is className implemented?