设置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呈现input内的html div 元素，该元素获取使用此输入组件样式时分配的类属性。

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

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

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

Answer 2

您可以使用以下JavaScript样式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。