Our team is integrating a CSS library into our React project. Check it out here: https://cssinjs.org/react-jss/?v=v10.1.1#dynamic-values.
I am currently working with two dynamic values in this way:
import React from 'react'
import {createUseStyles} from 'react-jss'
const useStyles = createUseStyles({
duration: (height, marginTop) => ({
marginTop: marginTop,
height: height
})
});
const Appointment = ({companyName, vehicleId, duration, isHalfHour=false}) => {
const height = (duration / 0.6).toString().concat('%');
const marginTop = isHalfHour ? '20px' : '0';
const classes = useStyles(height, marginTop);
return (
<div className={classes.duration}>
Sample Text
</div>
)
};
Initially, the system worked fine when only the height variable was used. But now that I'm trying to include the marginTop value as well, it seems to be ignored.
Even hardcoding like this didn't fix the issue:
const classes = useStyles(height, '20px');
I'm puzzled about what could be causing the second parameter in the duration style not to be applied correctly. Any insights are appreciated!