[Question] Dynamic values and class repetition
- 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
Assessment
This issue has not been assessed yet.