css modules in react

I am having some trouble with css modules in react I dont know how to use react modules in a dynamic way

import classnames from 'classnames'
import styles from './hover.module.css
///
///
const [flashElements,setFlashElements]=useState(elementList.map(element => {
        return element.classes.flash
    }))```

///
///

I want to be able to display the classes showing the value that corresponds to the element in state . is this even possible or should I approach the problem differently I want to be to do some thing like the code below

return (
     <a classname={styles.HOVER ,styles.flashElements[i]}>

Answer

Instead of import styles from './hover.module.css' try using import './hover.module.css' in your component and you can directly use the class names from your CSS file.

Use classNameinstead of classnamein your <a> tag

Advertisement

Answer