NextJS尾风警告：Prop`className`不匹配

Question

我已经收到以下警告，我不确定如何使其消失：

Warning: Prop `className` did not match. 

 Server: "flex items-center justify-start my-2 p-4 text-sm w-full hover:text-white rounded-r-lg \n       

 font-medium text-white bg-gray-900 rounded-r-lg group flex items-center px-2 py-2" 

 Client: "flex items-center justify-start my-2 p-4 text-sm w-full hover:text-white rounded-r-lg \n            
 text-gray-200 hover:bg-gray-700 group flex items-center px-2 py-2"
 a

_c<@webpack-internal:///./node_modules/next/dist/client/link.js:133:27

我的代码中的区域是：

const style = {
  inactive: `text-gray-200 hover:bg-gray-700`,
  active: `font-medium text-white bg-gray-900 rounded-r-lg`,
  link: `flex items-center justify-start my-2 p-4 text-sm w-full hover:text-white rounded-r-lg`,
};

 function Items() {
   const { asPath } = useRouter();
   return (
     <ul>
      <li>
         {data.map((item) => (
           <Link href={item.link} key={item.title}>
            <a
               className={classNames(
                 `${style.link} 
                  ${item.link === asPath ? style.active : style.inactive}`,
            "group flex items-center px-2 py-2"
          )}
        >

编辑：添加了更多代码

Answer 1

您需要删除classNames

以下是代码，请检查

const style = {
  inactive: `text-gray-200 hover:bg-gray-700`,
  active: `font-medium text-white bg-gray-900 rounded-r-lg`,
  link: `flex items-center justify-start my-2 p-4 text-sm w-full hover:text-white rounded-r-lg`,
};

 function Items() {
   const { asPath } = useRouter();
   return (
     <ul>
      <li>
         {data.map((item) => (
           <Link href={item.link} key={item.title}>
            <a
               className={
                 `${style.link} 
                  ${item.link === asPath ? style.active : style.inactive}
            group flex items-center px-2 py-2`
          )}
        >