I have getting the following warning, I am unsure of how to get it to go away:
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
The area where it is in my code is:
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"
)}
>
EDIT: added more code
You need to remove the classNames here
Below is the code , please check
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`
)}
>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments