Question

我正在尝试使用其他颜色激活一个元素，但是它不起作用。有人可以帮助我吗？如果可行，可能每个元素都会改变颜色，我该如何使用“ 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

问题出在我的偶像上我必须创建一个li组件并将其道具传递给他，然后它才能工作。谢谢大家对我的帮助。

mpirun -np N --mca mpi_yield_when_idle 1 ./a.out

将反应元素设置为有效

1 个答案: