React className override

[hosseinmd]

Imagine a React component like this

const Com = ({className}) => {
   const classes = useStyles();

   return (
     <div
        className={`${classes.container} ${className}`}
        //or
        className={`${className} ${classes.container}`}
      />
   )

}

But this is not working sometime, i think that is because of priority of CSS rules. How we could do something like this?

Reproduced: https://codesandbox.io/s/react-jss-playground-forked-ckehn?file=/com.js

[kof]

Background is yellow

[hosseinmd]

That is because of important

[kof]

1. How to make this work

Made an example https://codesandbox.io/s/react-jss-playground-forked-3ww6e?file=/index.js

Source order specificity is defined by the time when createUseStyles is called (module evaluated). In your case, you wanted Comp rule to override App rule but createUseStyles() of the Comp was called first. So I imported in the example App first, then Comp, so that Comp style have higher specificity.

In other words, imports order is the same as style order in the DOM

Imports:

• App
• Comp

DOM:

• App style
• Comp style

The last one always wins if other specificity properties are the same.

You can achieve that also by moving the createUseStyles() call to a different place.

2. There are ways to avoid needing it.

I recommend to not pass classes at all if possible, specificity issues like this can be avoided by simply not passing classes around.
Better way of doing it is asking the inner component to change whatever style you need. This way you are being more explicit about the public API of that inner component and when someone reads the inner component or you need to refactor it, you can see how it's going to be customized by consumers. A class name passed from outside can literally do anything to it and you won't know how this component is going to behave once it's used this way.

[hosseinmd]

I don't have enough knowledge about DomRenderer, where can I learn more.

[hosseinmd]

Could you give me a link of implemented atomic renderer?

[hosseinmd]

I passed an object (type of JssStyle) to Com.
https://codesandbox.io/s/react-jss-playground-forked-ckehn?file=/com.js

This is not a clear way and just solving a problem.
We need a good solution.
I think @HenriBeck could help too.

[SBRKH]

You can use library like clsx (https://github.com/lukeed/clsx) and then used it like :

<div className={clsx(classes.container, className)}>
 //some stuff
</div>

[hosseinmd]

You can use library like clsx (https://github.com/lukeed/clsx) and then used it like :

<div className={clsx(classes.container, className)}>
 //some stuff
</div>

Problem is priority of classes, for example I want a guaranty to priority of class-a to class-b, how can I assign it to HTML element and have this guaranty.

[hosseinmd]

I solve it by managing index my self, managing index in hug project was complex for solving that I changed my components to atomic design pattern.

[hosseinmd]

I think the best solution for that is passing classes values to child components instead of give generate class name to child. So in the end merge them together and generate a class