Search code examples
reactjscss-modulesreact-css-modules

react component is unable to locate my CSS class

import { classes } from './DropdownMenu.module.css';

function DropdownMenu() {
    return(
        <div className={classes["dropdown"]}>

I've defined a file called DropdownMenu.module.css in the same directory as the DropdownMenu.js file

The CSS in the file looks like

.dropdown {
    position: absolute;
}

I am not sure why it can't find it. I've tried using classes.dropdown and that didn't help. I've also cleared my browser cache and reinstalled my packages with npm install.

The error I receive is

Cannot read property 'dropdown' of undefined

Solution

  • You need the default export. Try importing it like this:

    import classes from './DropdownMenu.module.css';

    and then use it like this:

    <div className={classes.dropdown}>