feat: Removed tss-react and replaced it with the default "styled" styling of mui.

[ashfaqnisar]

Replaced all of the components with the styled styling in mui.
Updated the examples with the new styled styling.
Removed tss-react from deps.

For this issue #1826

[ashfaqnisar]

Hey @wdh2100 buddy, please let me know if there are any changes or issues with the PR. Would be happy to resolve them.

[ashfaqnisar]

I have connected the repo to my project and everything worked great. If anyone can connect this PR to their project and check whether there are any issues with the PR, that would be great.

[ashfaqnisar]

Closing this PR. As tss-react seems to better option than the styled for readability and understanding as we update the project.

[d0lb33]

Is this why createTheme only works for me in V4.0.0 and not anything newer?

It seems createTheme from @mui/material only themes html elements without tss prepended when i use any new version. I just now figured out today that the latest version was causing my custom mui themes to not apply fully (some things would work, but not others).

Is the only solution right now to stay on V4.0.0?

[garronej]

deleted as misleading

[hornandrewm]

@garronej can you provide a codesandbox or equivalent of both @mui and mui-datatables being the latest version with custom css working on the mui datatable classes? I could only get them to work on mui-datatables v4 and not the latest version.

Here's a start that I was experimenting with, if I change mui-datatables to v4, the table cells show up pink.

https://codesandbox.io/s/exciting-sound-g16bec

[garronej]

deleted as misleading

[hornandrewm]

@hornandrewm I'll admit that I have some trouble making it work but I am not a familiar with mui-datatable. I am just here to provide support relative to the styling engine they use. This is what I have acheived: https://codesandbox.io/s/cool-thunder-j6cwmj?file=/src/App.js

Basically if you have problem with style only applying when you add !important or SSR rendering you can ping me, it's my realm. For the rest it's on the core team.

Best regards

Unfortunately the docs on this repo say that you can use mui's global overrides/themes to style it's components. The example you provided is just using a class to style something conditionally and not a global theme. The codesandbox I gave you above works for v4 (before tss-react) and now fails and and I'm assuming it's because mui/tss-react don't share a global theme or something similar. Either way, it's very unfortunate that this functionality was broken after swapping to tss-react.

[garronej]

@d0lb33 @hornandrewm Sorry for my previous messages, they where misleading. It's fixed in the PR #1882.
Now It just needs to get merged....
It's was not a bug in tss-react though... it was just a feature that this library's maintainer assumed to be present in TSS but wasn't 🙂
It's fixed