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

Question

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

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

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

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

Answer 1

React-Select 渲染 htmlinput元素，该元素div获取您在使用此输入组件样式时分配的 class 属性。

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

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

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

Answer 2

您可以使用以下 style-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";
}

这里有一个活生生的例子。