设置 react-select 的输入字段的字体系列答案

【问题标题】：Setting the font-family of the input field of a react-select设置 react-select 的输入字段的字体系列
【发布时间】：2023-03-09 04:47:01
【问题描述】：

所以我正在尝试设置 react-select 组件的输入字段的样式。不幸的是，字体系列被标准输入元素覆盖，因为样式被应用到包装器 div 而不是输入字段本身。

input: () => ({
  fontFamily: `${theme.fonts.tabs.family} !important`,
  fontWeight: theme.fonts.tabs.weight,
  fontSize: 18,
  color: theme.colors.secondary,
  height: 24
}),

如何在不使用类名的情况下更改 fontFamily？

这段代码产生了什么我想要的是

【问题讨论】：

你使用的是哪个版本的 react-select ？

标签： reactjs react-select

【解决方案1】：

React-Select 在 div 内呈现 html input 元素，该元素获取您在使用此输入组件样式时分配的类属性。

因此，要扩展您的尝试，只需在您的样式对象上添加一个子选择器，以该输入为目标。

input: () => ({
  fontFamily: `${theme.fonts.tabs.family}`,
  '& input': {
    font: 'inherit',
  },
}),

这样渲染的input 会从接收生成的*-Input 类的div 继承字体样式。

【讨论】：

【解决方案2】：

您可以使用以下样式-in-JS props：

control: base => ({
    ...base,
    fontFamily: 'Times New Roman',
  })

无需使用!important 声明。

编辑

input 似乎有问题，并且无法正确呈现fontSize，因此您可以在选择时添加className 的完整体验，如下所示：

<Select className="select" styles={styles} options={options} />

并应用以下 CSS：

.select input {
  font-family: "Times New Roman";
}

这里是live example。

【讨论】：

抱歉@PennyPang，但您必须提供更深入的代码示例，因为正如您在我刚刚添加的实时示例中看到的那样，它运行良好。
嗨@Laura，这是我开始输入时的用户输入，结果不是Times New Roman。有没有办法让用户输入也输入相同的字体？
@PennyPang 我做了一些更新以在用户输入中使用相同的字体。你不能使用 CSS-in-Js 道具所以我想你可以在 github 上打开一个问题