I am using react and styled-components.
I want to change the stroke color of the icon to black when the Item is hovered.
When the item is clicked, it is black, but when it is hovered, it is not.

code

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;

CodePudding user response：

You are using quotes in the color value and also using the stroke property like it was a tag.

You can do what you want at this way:

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