从不使用类名和映射的模块导入反应 css

Question

I'm using the.modules.css to style this component of a navigation menu

I have brought in the className via mapping over the array in a seperate file by accessing item.cNname

The question is how do I access the style module from here? using style.item.cName does not work. any help would be great thank you

import style from "./MainNavigation.module.css";

          {MenuItems.map((item, index) => {
            return (
              <li key={index}>
                <a className={item.cName} href={item.url}>
                  {item.title}
                </a>
              </li>
            );   
          })}
        </ul>

/////////////////////////////////////////////////////

Array of menu menu item <a>

 export const MenuItems = [
    {
        title: 'Jobs',
        url: '/',
        cName: 'navLinks'
    },
    {
        title: 'Employers',
        url: '/',
        cName: 'navLinks'
    },
    {
        title: 'Get Connected',
        url: '/',
        cName: 'navLinks'
    },
    {
        title: 'About Us',
        url: '/',
        cName: 'navLinks'
    },
    {
        title: 'Contact Us',
        url: '/',
        cName: 'navLinks'
    },
] ```

Answer 1

import "./MainNavigation.module.css";

Answer 2

try like this:

import style from "./MainNavigation.module.css";

      {MenuItems.map((item, index) => {
        return (
          <li key={index}>
            <a className={`style.${item.cName}`} href={item.url}>
              {item.title}
            </a>
          </li>
        );   
      })}