React搭配styled-components时hover修改SVG stroke颜色不生效问题

问题原因 #

你的hover状态样式存在三处语法错误：

• 错误嵌套了stroke层级：stroke是path元素的CSS属性，不是子选择器，无需嵌套
• 属性使用错误：你需要直接修改stroke属性的值，而非给stroke设置fill属性
• 多余的引号：CSS属性值不需要加额外的双引号，加了会被识别为非法值

修正后的代码 #

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: #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;

补充说明 #

修正后hover选择器的优先级高于普通的path选择器，因此未激活状态下hover时图标stroke会变成黑色，激活状态下本身就是黑色，效果不受影响。

内容的提问来源于stack exchange，提问作者yuturo