设置反应元素活动

Question

我正在尝试使用不同的颜色来激活一个元素，但它 working.Someone 无法帮助我？如果它有效，可能每个元素都会改变颜色，我怎么能用 "this" 之类的东西或任何其他东西来做到这一点。那是我的元素和我的状态：

//-> 我的状态：我使用 true 作为默认值，因为我试图做到这一点，但我失败了

export default function VertNavigation() {

 const [active, setActive] = useState(true);
 console.tron.log(active);
 return (
   <Container>
     <button type="button">DEPOSITAR</button>
     <QuickNavi>
       <VerticalNavigation>
         <Title>ACESSO RÁPIDO</Title>

         <li>
           <Icon.MdMonetizationOn size={20} />
           <p>Emitir Cobrança</p>
         </li>
         <li>
           <Icon.GoGraph size={20} active={active} />
           <p>Gestão de cobrança</p>
         </li>
         <li>
           <Icon.MdCompareArrows size={20} />
           <p>Tranferencia</p>
         </li>
         <li>
           <Icon.FaBarcode size={20} />
           <p>Pagamentos</p>
         </li>

// -> my styled component -- its always in "else", i don't know why
  export const VerticalNavigation = styled.ul`
 width: 100%;
 height: 100%;

 li:nth-child(4)::after {
   content: 'novo';
   right: 0;
   margin-left: 6px;
   text-align: center;
   font-size: 12px;
   top: 10px;
   width: 45px;
   height: 15px;
   background: #47b248;
   color: #fff;
   border-radius: 10px 10px 10px 10px;
 }

 li {
   width: 100%;
   height: 45px;
   display: flex;
   align-items: center;
   cursor: pointer;

   &:hover svg {
     transform: translateY(-5px);
     color: #47b248;
   }

   svg {
     transition: 0.3s ease;
     color: ${props => (props.active ? '#47B248' : '#939393')};
   }

   p {
     padding-left: 15px;
     font-size: 15px;
     color: ${darken(0.5, '#A6A6A5')};
   }
 }
`;

提前致谢。

Answer 1

问题出在我的 Icon 上，就像他们说的那样。我必须创建一个 li 组件并为他传递我的道具，然后它才能工作。谢谢大家的帮助。

           ->index.js

<Item active={active}>
  <Icon.GoGraph size={20} />
  <p>Gestão de cobrança</p>
</Item>

          ->styles

export const Item = styled.li`
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  cursor: pointer;


  svg {
    transition: 0.3s ease;
    color: ${props => (props.active ? '#47B248' : '#939393')};
  }

设置反应元素活动

Set react element active

reactjs

styled-components

react-hooks