如何通过Prop调整react-select组件的字体（字号、字体族等）？

方法1：通过styles prop自定义各部分样式 #

react-select允许通过styles prop针对组件的不同部分（输入框、下拉菜单、选项、已选标签等）单独设置样式，完全满足你通过Prop控制样式的需求。

给Select组件添加styles属性，针对需要调整字体的部分定义样式即可：

const JobPostSkillsValued = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  // 自定义字体样式
  const customStyles = {
    control: (base) => ({
      ...base,
      fontFamily: "'Roboto', sans-serif", // 替换为你的目标字体族
      fontSize: "14px", // 设置字号
    }),
    menu: (base) => ({
      ...base,
      fontFamily: "'Roboto', sans-serif",
      fontSize: "14px",
    }),
    option: (base, state) => ({
      ...base,
      fontFamily: "'Roboto', sans-serif",
      fontSize: "14px",
      // 可选：保留选中/hover状态的背景色，仅统一字体
      backgroundColor: state.isSelected ? "#f0f0f0" : state.isFocused ? "#e0e0e0" : base.backgroundColor,
    }),
    multiValue: (base) => ({
      ...base,
      fontFamily: "'Roboto', sans-serif",
      fontSize: "12px", // 已选标签可单独设置字号
    }),
    singleValue: (base) => ({
      ...base,
      fontFamily: "'Roboto', sans-serif",
      fontSize: "14px",
    }),
  };

  return (
    <PrimaryContentContainer>
        <PayContainerDropdown>
            <Typography variant="subtitle2" marginBottom="15px"> 
                Pay typerr
            </Typography>
            <GeneralSkillsDropDownContainer>
              <Select
                closeMenuOnSelect={false}
                components={animatedComponents}
                defaultValue={[colourOptions[4], colourOptions[5]]}
                isMulti
                options={colourOptions}
                onChange={setSelectedOption}
                styles={customStyles} // 传入自定义样式
              />
            </GeneralSkillsDropDownContainer>
        </PayContainerDropdown>
    </PrimaryContentContainer>
  )
}

export default JobPostSkillsValued

每个样式函数接收基础样式base和当前状态state（如是否选中、是否hover），通过扩展运算符保留原有样式，再覆盖字体相关属性即可。

方法2：通过theme prop统一设置全局字体 #

如果希望整个组件的字体风格统一，不想逐个部分设置，可以用theme prop修改react-select的默认主题：

const JobPostSkillsValued = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  // 自定义主题，统一字体
  const customTheme = (theme) => ({
    ...theme,
    defaultStyle: {
      fontFamily: "'Roboto', sans-serif",
      fontSize: "14px",
    },
    // 可选：同时调整组件颜色，不需要可删除
    colors: {
      ...theme.colors,
      primary: "#2196f3",
    },
  });

  return (
    <PrimaryContentContainer>
        <PayContainerDropdown>
            <Typography variant="subtitle2" marginBottom="15px"> 
                Pay typerr
            </Typography>
            <GeneralSkillsDropDownContainer>
              <Select
                closeMenuOnSelect={false}
                components={animatedComponents}
                defaultValue={[colourOptions[4], colourOptions[5]]}
                isMulti
                options={colourOptions}
                onChange={setSelectedOption}
                theme={customTheme} // 传入自定义主题
              />
            </GeneralSkillsDropDownContainer>
        </PayContainerDropdown>
    </PrimaryContentContainer>
  )
}

export default JobPostSkillsValued

theme函数接收默认主题对象，扩展后修改defaultStyle里的字体属性，组件所有文本部分会自动继承这个设置，更简洁高效。

注意事项 #

• 将'Roboto', sans-serif替换为你实际使用的字体（如自定义本地字体或Google Fonts字体）
• 若使用自定义字体，需确保字体已在项目中正确加载
• 两种方法可结合使用：用theme设置全局字体，再用styles针对特定部分微调

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