search

gregnb / mui-datatables

Datatables for React using Material-UI
MIT License
2.71k stars 934 forks source link

No css classes in header column in Production #1477

Open BohdanYavorskyi opened 4 years ago

BohdanYavorskyi commented 4 years ago

Thead th cell has span inside it with role="button" and class="MUIDataTableHeadCell-toolButton-[mui-number-prefix]" in development mode. But in production there is no class="MUIDataTableHeadCell-toolButton-[mui-number-prefix]".

Expected Behavior

The class must be present in production mode as well as in Development one.

Current Behavior

The class is present just in development mode.

Steps to Reproduce (for bugs)

  1. Add table to the page.
  2. Inspect a document in development and production mode.
  3. See that class is not present in Production.

Your Environment

Tech Version
Material-UI 4.11.0
MUI-datatables 3.4.0
React 16.13.1
browser Chrome

Attacments: Dev: image

Prod: image

wdh2100 commented 4 years ago

That's the result of webpack (local-css).

Well... maybe not.

Could you give me an CodeSandBox

patorjk commented 4 years ago

I believe @wdh2100 is right, and this isn't a mui-datatables thing, it's how JSS was setup to work. It shouldn't really impact anything though. I use overrides in my code with the original names and everything still works fine.

BohdanYavorskyi commented 4 years ago

I believe @wdh2100 is right, and this isn't a mui-datatables thing, it's how JSS was setup to work. It shouldn't really impact anything though. I use overrides in my code with the original names and everything still works fine.

I use overrides as well. Everything works amazingly except that case with "MUIDataTableHeadCell-toolButton" class. It is not a custom one. This class comes from the library itself.

BohdanYavorskyi commented 4 years ago

That's the result of webpack (local-css).

Well... maybe not.

Could you give me an CodeSandBox

I can see css class in SandBox.

https://codesandbox.io/s/youthful-lederberg-6cunm?file=/src/App.js

wdh2100 commented 4 years ago

As a result of webpack, jss-xxx means local css.

https://github.com/gregnb/mui-datatables/blob/master/src/components/TableHeadCell.js

Here we are using a style override (local css-include jss) on the button.

Attacments: Dev: image

Prod: image

As a result, it looks like this.

production mode : https://webpack.js.org/plugins/uglifyjs-webpack-plugin/

patorjk commented 4 years ago

@BohdanYavorskyi are you saying your override for "MUIDataTableHeadCell-toolButton" is not working in production?

Try adding a StylesProvider to you app: (see the createGenerateClassName example at the top)

https://material-ui.com/styles/api/

It may be that some of your classnames are having collisions. I was able to override the classes fine in production mode.

BohdanYavorskyi commented 4 years ago

@BohdanYavorskyi are you saying your override for "MUIDataTableHeadCell-toolButton" is not working in production?

Try adding a StylesProvider to you app: (see the createGenerateClassName example at the top)

https://material-ui.com/styles/api/

It may be that some of your classnames are having collisions. I was able to override the classes fine in production mode.

@patorjk yeah, I'm overriding this class. I use a default StylesProvider