reactjs - 设置 react 选择输入字段的字体系列

Question

所以我正在尝试设置 react 选择组件的输入字段的样式。不幸的是，font-family 被标准输入元素覆盖，因为样式应用于包装器 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 渲染 div 内的 html input 元素，该元素获取您在使用此输入组件样式时分配的类属性.

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

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

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