cssinjs / cssinjs/jss

[Question] Dynamic values and class repetition

Open
#1,588 4 comments 6 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

Hello!

I was hoping to clear up something that seems like a bug to me. I was under the impression, that when you had a, say, React component with dynamic values as the button in the docs example: https://cssinjs.org/react-jss/?v=v10.8.2#dynamic-values, that it generated a classname that other instances of the same button with the same dynamic values would reuse.

What I mean by that is that if I have multiple components that use the default prop values, since the css values at the end of the day are the _same_, it'll just reuse the classname and not generate another one.

If we take the following example based off of the Dynamic Values docs:
```js
import * as React from "react";
import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
myButton: {
padding: (props) => props.spacing,
},
});

const Button = ({ children, ...props }) => {
const classes = useStyles(props);

return ;
};

Button.defaultProps = {
spacing: 10,
};

const IndexPage = () => {
return (
<>




);
};

export default IndexPage;
```

and take a look at the generated styles:
```
.myButton-0-2-1 {}
.myButton-d0-0-2-2 {
padding: 10px;
}
.myButton-d1-0-2-3 {
padding: 10px;
}
.myButton-d2-0-2-4 {
padding: 10px;
}
```

I fail to understand why `myButton-d0-0-2-2`, `myButton-d1-0-2-3` and `myButton-d2-0-2-4` are all separated out, as well as why `.myButton-0-2-1 ` is empty?

Am I misunderstanding some core tenant of `JSS`? How can I reuse the same classname across all my components?

Thank you!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.