如何在React Select组件中修改Option内Span元素的样式？

当然可以修改Option内Span的字体大小，下面分两种常用方法实现，同时解决Span元素的引用问题：

方法1：自定义Option组件（推荐，灵活可控） #

react-select允许通过components属性重写内置的Option组件，这样你可以完全自定义Option的结构和样式：

步骤1：定义自定义Option组件 #

import React from 'react';
import Select, { Option } from 'react-select';

// 自定义Option组件
const CustomOption = ({ data, ...props }) => {
  return (
    <Option {...props}>
      {/* 直接渲染带Span的内容，这里可以直接控制Span的样式 */}
      I need to change the span below: <br />
      <span style={{ fontSize: '12px', color: '#666' }}>Hi, I am going to be a little be smaller</span>
    </Option>
  );
};

const options = [
  { value: 'chocolate', label: '' } // 这里label留空，自定义组件已包含内容
];

const MyComponent = () => (
  <Select 
    options={options} 
    components={{ Option: CustomOption }} // 替换默认Option组件
  />
);

export default MyComponent;

如果需要动态复用options里的label内容，可以把label改成JSX元素，再在自定义组件中渲染并修改Span：

const options = [
  { 
    value: 'chocolate', 
    label: (
      <>
        I need to change the span below: <br />
        <span>Hi, I am going to be a little be smaller</span>
      </>
    ) 
  },
];

const CustomOption = ({ data, ...props }) => {
  return (
    <Option {...props}>
      {/* 遍历label的子元素，找到Span并修改样式 */}
      {React.Children.map(data.label.props.children, child => {
        if (child.type === 'span') {
          return React.cloneElement(child, { 
            style: { fontSize: '12px', fontWeight: 'normal' } 
          });
        }
        return child;
      })}
    </Option>
  );
};

方法2：通过CSS类控制样式 #

如果不需要复杂逻辑，直接用CSS定位Span元素也可以：

步骤1：给Select组件设置自定义类前缀 #

const MyComponent = () => (
  <Select 
    options={options} 
    classNamePrefix="custom-select" // 设置自定义类前缀
  />
);

步骤2：编写CSS样式 #

/* 定位Option内的Span元素 */
.custom-select__option span {
  font-size: 12px;
  color: #999;
}

注意：如果不设置classNamePrefix，react-select会生成动态类名（比如css-1n7v3ny-option），这类类名不固定，所以推荐自定义前缀。

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