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

reactjs react-select
Sam Markowitz picture Sam Markowitz · Jul 26, 2018 · Viewed 7.6k times · Source

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 this code produces What I want What I want

Answer

iamcastelli picture iamcastelli · Sep 8, 2019

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.

Related questions

How to set a default value in react-select

I have an issue using react-select. I use redux form and I've made my react-select component compatible with redux form. Here is the code: const MySelect = props => ( <Select {...props} value={props.input.value} onChange={value => props.input.…

Read More
How to style react-select options

What's the best way to style a react-select component's (https://github.com/JedWatson/react-select) options? I can target the select itself just fine, with something like: ... import Select from 'react-select' ... const styles = { fontSize: 14, color: 'blue', } <Select options={[1,2,3,4]} placeholder={'Select …

Read More
How to programmatically clear/reset React-Select?

ReactSelect V2 and V3 seems to have several props like clearValue, resetValue and setValue. Whatever I'm trying, I'm not able to clear the selections programmatically. resetValue seems not to be accessible from the outside. selectRef.setValue([], 'clear') // or selectRef.clearValue() …

Read More