styles.nav__item似乎在表达式之前不起作用。我如何正确编写它以继续样式设置？

import Link from "next/link";
import React from "react";
import styles from '../styles/Navbar.module.css'

const NavItem = ({ text, href, active }) => {
  return (
    <Link href={href}>
      <li
        className={`nav__item ${
          active ? styles.active : ""
        }`}
      >
        {text}
      </li>
    </Link>
  );
};

export default NavItem;