Setting the font-family of the input field of a react-select

Question

So I'm trying to style the input field of a react-select component. Unfortunately, the font-family is being overwritten by the standard input element since the styles are being applied to the wrapper div and not the input field itself.

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

How would I go about changing the fontFamily without using class names?

What this code produces What I want

Answer 1

You can use the following style-in-JS props:

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

No need to use !important declaration.

EDIT

It seems to have an issue for the input and it does not render proper fontSize so have a complete experience you can add a className on your select like this:

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

and apply the following CSS:

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

Here a live example.

Answer 2

React-Select renders the html input element inside the div that gets the class property that you assign when you use this input component styles.

So to extend your attempt, just add a child selector on your styles object, targeting that input.

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

That way the rendered input inherits the font style from the div that receives the generated *-Input class.