Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add support for className

See original GitHub issue

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).

Issue Analytics

State:
Created 4 years ago
Reactions:21
Comments:11

Top GitHub Comments

19reactions

pak11273commented, Aug 10, 2019

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>

12reactions

pstephenwillecommented, Jan 28, 2021

I had to laugh at the comment So we don't bloat the codebase,... because inline styles are code bloat. Without react classNames I can’t target table implementations and reduce code bloat via cascading styles. Plus, the source code is way bloated with all the style objects. IMO, it’s a step backwards.

Top Results From Across the Web

How To Add a Class Name - W3Schools

Learn how to add a class name to an element with JavaScript. Add Class. Click the button to add a class to me!...

Element.className - Web APIs | MDN

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

Add CSS Support for className Attribute in React JSX syntax

In React JSX syntax you have to use the attribute className instead of class as described here: https://facebook.github.io/react/docs/jsx-in-depth.html

JavaScript adding a class name to the element - GeeksforGeeks

Using .add() method: This method is used to add a class name to the selected element. Syntax: element.classList.add("newClass ...

How to dynamically add a class to manual class names?

Depending on how many dynamic classes you need to add as your project grows it's probably worth checking out the classnames utility by ......