如何仅用CSS修改React中CreatableSelect组件的SVG图标？

首先明确：CSS无法直接修改SVG元素的d属性——d是SVG path的结构属性，而非样式属性，CSS仅能控制视觉样式（如颜色、尺寸），无法修改这类结构定义。针对你的需求，提供几个可行的替代方案：

方案1：通过组件props自定义图标（推荐） #

CreatableSelect（来自react-select）原生支持通过components prop自定义图标组件，这是最可靠的实现方式：

import CreatableSelect from 'react-select/creatable';
import { ReactComponent as CustomIcon } from './your-custom-icon.svg';

const CustomDropdownIndicator = () => <CustomIcon />;

// 在组件中使用
<CreatableSelect
  components={{ DropdownIndicator: CustomDropdownIndicator }}
  // 其他业务props
/>

如果目标图标是简单形状，也可直接编写SVG元素：

const CustomDropdownIndicator = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
    <path d="你的目标d属性值" />
  </svg>
);

方案2：用CSS隐藏原图标，替换为背景图 #

若必须通过CSS实现，可隐藏原SVG的path元素，给容器添加自定义背景图：

/* 替换为CreatableSelect生成的SVG容器实际类名，比如默认的css-19bqh2r */
.css-19bqh2r svg path {
  display: none; /* 隐藏原路径 */
}

.css-19bqh2r svg {
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="你的目标d属性值" fill="currentColor"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

注意：需将你的目标d属性值替换为实际路径，同时确保SVG代码转义正确（如使用单引号避免冲突）。

方案3：通过JS操作DOM（不推荐） #

可在组件挂载后，通过DOM查询找到对应path元素并修改d属性：

import { useEffect, useRef } from 'react';
import CreatableSelect from 'react-select/creatable';

const MySelect = () => {
  const selectRef = useRef(null);

  useEffect(() => {
    if (selectRef.current) {
      const pathElement = selectRef.current.querySelector('svg path');
      if (pathElement) {
        pathElement.setAttribute('d', '你的目标d属性值');
      }
    }
  }, []);

  return <CreatableSelect ref={selectRef} />;
};

该方式依赖固定DOM结构，react-select版本更新后可能失效，不建议长期使用。

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