Dynamically created styles not rendering with React-jss - reactjs

Question

I'm using react-jss in my React project.
I want to set up some of the styles dynamically based on some property sent through props in createUseStyles
For eg :
In the component
const useStyles = createUseStyles (styleProp)
And in the stylesheet
type1 = () => {
return {
className : {
backgroundColor : 'blue',
}
}
}
type2 = () => {
return {
className : {
backgroundColor : 'green',
}
}
}
switch (styleProp) {
case 'type1' :
return type1 ();
case 'type2' :
return type2 ();
}
The first time I call this with a particular styleProp it works fine. It renders the correct bg color. But when the type changes the next time it goes through the correct type function but the style rendered is incorrect.
If someone could tell me what I'm doing wrong that would be great!

Answer 1

From the official documentation, you need to do something similar like this:
import React from 'react'
import {createUseStyles} from 'react-jss'
const useStyles = createUseStyles({
myButton: {
padding: props => props.spacing
},
myLabel: props => ({
display: 'block',
color: props.labelColor,
fontWeight: props.fontWeight,
fontStyle: props.fontStyle
})
})
const Button = ({children, ...props}) => {
const classes = useStyles(props)
return (
<button className={classes.myButton}>
<span className={classes.myLabel}>{children}</span>
</button>
)
}
Button.defaultProps = {
spacing: 10,
fontWeight: 'bold',
labelColor: 'red'
}
const App = () => <Button fontStyle="italic">Submit</Button>
Now if you want to update it dynamically, you can maintain a state, and store the variable value in that state, and you can update the state using the setState function, this will surely update your UI with the correct expected output.