Currently, I am immersed in a project based on NextJS where I have to utilize React State to determine the width of a div. In the existing setup, this calculation takes place within a .tsx file using constants and is incremented upon clicking a button. The resulting width is then transmitted as a prop to the component.
At present, I am employing inline styling to specify the width of the div. However, I am intrigued to find out if it is feasible to directly pass the prop into the .module.css file I'm utilizing, as it would result in a neater and more convenient approach for implementing media queries later on. Is this achievable?
Furthermore, is there a way to import variables from the media queries back into the .tsx file?
Main File:
const [width, setWidth] = React.useState(0)
const increment: number = maxWidthTop / totalRounds
export default function Labeller() {
function clicked() {
setWidth(width + increment)
}
return (
<Progress
width={width} />
)}
Component File:
import styles from '../../styles/Progress.module.css'
type ProgressProps = {
width: number;
}
export default function ProgressBar(props: ProgressProps) {
return (
<div className={styles.main}>
<div className={styles.bar}>
<div className={styles.base}></div>
<div style={{width: `${props.width}em`}} className={styles.top}></div>
</div>
</div>
)
}