小编Bol*_*sky的帖子

我有一个与 tailwindcss 和 React 相关的问题。我有一个属性，如果 a<NavItem />聚焦，那么背景和文本将会改变。<LanguageSwitcher />是另一个组件，如果它是焦点，我希望它不改变导航栏中其他项目的焦点状态。<LanguageSwitcher />不影响网址。

这是我的导航栏中项目的代码以及如何<LanguageSwitcher />影响其他项目的焦点状态的图像：

import React from "react";

import { Link } from "react-router-dom";

interface Props {
  title: string;
  url: string;
  icon: JSX.Element;
}

const NavItem: React.FC<Props> = ({ title, url, icon }) => {
  //https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-classes
  return (
    <Link
      to={url}
      className="text-center items-center flex-col justify-center font-medium  px-1 text-white  capitalize  hover:font-semibold  select-none group"
    >
      <div className="flex items-center justify-center mb-1 rounded-3xl px-2 py-1 group-hover:bg-btnHover group-focus:bg-btnActive group-focus:text-textActive transition-colors duration-75"> …