How to correctly infer type for tss-react withParams and create

Question

Hi everyone and thank you in advance for your kind help. I'd like to use tss-react lib for styling, cause I will use Material UI components. I'm reading some docs and the modern api approach suggests to use the create method from 'tss-react/mui' as I did in the example below.

But... In my project, I need for client request to have a strict typescript setup. What is happening is, when I paste the code in my component.styles.ts file, like this:

import {tss} from 'tss-react/mui';

const useStyles = tss
    .withParams<{ isClicked: boolean; }>()
    .create(({theme, isClicked }) => ({
        root: {
            backgroundColor: "black",
        },
        text: {
            color: isClicked ? theme.palette.xxx : theme.palette.yyy,
        }
    }));

it gives me an error uderlining the useStyles. The problem is: The inferred type of 'useStyles' cannot be named without a reference to '../../../node_modules/tss-react/types'. This is likely not portable. A type annotation is necessary.

It is necessary that I give a type to the useStyles. It is like typescript is not able to automatically infer it.

I have tried a lot of solutions but none of them worked... I don't know how to solve this. Do you have any suggestion/idea?

Thank you!

Answer 1

I was able to work around this issue by explicitly importing Tss for portability reasons.

// eslint-disable-next-line @typescript-eslint/no-unused-vars
import {Tss} from 'tss-react'; // for TS portability

import {tss} from 'tss-react/mui';

...