मैं प्रतिक्रिया और स्टाइल-घटकों का उपयोग कर रहा हूं।
जब आइटम होवर किया जाता है तो मैं आइकन के स्ट्रोक रंग को काले रंग में बदलना चाहता हूं।
जब आइटम पर क्लिक किया जाता है, तो यह काला होता है, लेकिन जब इसे होवर किया जाता है, तो यह नहीं होता है।

कोड

import "./styles.css";
import styled from "styled-components";
import { Folder } from "./Folder";
import React, { useState } from "react";

const Item = styled.div<{ active?: boolean }>`
  height: 40px;
  width: 100%;
  padding: 0px 30px;

  &:hover {
    background: #fafbfb;
    path {
      stroke {
        fill: "#000000";
      }
    }
  }

  path {
    stroke: ${({ active }) => (active ? "#000000" : "#BDC4CB")};
  }
`;

export const App = () => {
  const [click, setClick] = useState(false);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Item active={click} onClick={() => setClick(!click)}>
        <Folder />
      </Item>
    </div>
  );
};
export default App;

0
yuturo 21 अक्टूबर 2021, 06:44

1 उत्तर

सबसे बढ़िया उत्तर

आप रंग मान में उद्धरणों का उपयोग कर रहे हैं और स्ट्रोक गुण का भी उपयोग कर रहे हैं जैसे कि यह एक टैग था।

आप इस तरह से जो चाहें कर सकते हैं:

&:hover {
    background: #fafbfb;
    path {
      stroke: #000000;
    }
  }
1
Daniel Sifontes 21 अक्टूबर 2021, 07:16