Injection order handling as jss does

[basile-savouret]

Hi, thank you for the awesome work you are providing here.

I'm using tss to replace makestyles on a mui migration. I have a component library that i use in an application i am currently migrating to mui v5. Both of them are using tss and i am struggling with style injection, the same way i struggled with the makeStyle back to mui v4.

here in my application: The first tss class is comming from my library and should be placed below the second.

My classes are declared with clsx like so:

className={clsx(
     className,
     'AruiAppBar-root',
     defaultStyles.classes.root
)}

For jss i quickly found the index option provided on a makestyle that can tell the injection priority. Is there anything similar in tss?

I saw in this ticket #56 that the placement of the classes does a difference in the cx function. Is it the same foc clsx? I remember on mui they specified that the placement does not impact the injection of the styles. Do i have to use the function cx insted of clsx?

[garronej]

@basile-savouret,

Thank you for the kind words,

cx is a lot smarter than cslx, it is capable of enforcing that if you call cx(className1, className2) the styles of className2 will have a higher priority than the styles of className1.

It is a great emotion feature that gives you control over how things are rendered. You should definitely stop using cslx in favor of cx.

You optain cx this way:

const { classes, cx } = useStyles();

Just in case you didn't notice, there is a new documentation website:

https://docs.tss-react.dev/setup

There is a mention about cx in the setup page.

Best regards

[basile-savouret]

@garronej ,

Thank you for your answer. I have looked up at the new documentation but i was mainly researching a similar approach as jss index in tss.

You could add a brief sentence about the injection priority handling with cx in your docs, just to clarify it. I'm going to migrate all my cslx.

Thank you for your precious help, i wish you the best for the future.