garronej/tss-react

[Help] Support for Material Ui 5 with Javascript

Bramgus12 opened this issue · 2 comments

Bramgus12 commented

I am currently using a project with Material UI 4 and am in the process of changing to MUI 5. I had used a lot of makeStyles and would like to still use this way of styling. I saw this repo and thought this would be a great way to still use makeStyles, but then saw that you guys specifically made this for TS and not JS. So I am asking if you guys support JS and if you do, how can I then add it to my project? Maybe there could be a specific guide with everything you need to do to convert your MUI 5 project to use this library?

garronej commented

Hi @Bramgus12,
You can use TSS with a plain JavaScript problem. Infact there is no such thing as an npm module that would work only with TypeScript.
No specific instruction are required to make it work, just follow the guide in the README and remove the types annotation whenever there is.

Essentially:

- const useStyles = makeStyles<{ color: "red" | "blue" }>()(
+ const useStyles = makeStyles()( 
    (theme, { color }) => ({
        "root": {
            color,
            "&:hover": {
                "backgroundColor": theme.primaryColor,
            },
        },
    }),
);
  • 👍2
Bramgus12 commented

Thanks for the reply, I'll try to get it to work tonight. Maybe you can add somewhere in the readme that it will work on Javascript or even add examples for javascript? This will most certainly help the junior developers!

  • 👍1