CODEWITHSUNDEEP
reactjsselect
Darío Olivares
Darío Olivares

Reputation: 33

React Select, how to change the font size on on the dropdown menu

React Select, how to change the font size on on the dropdown menu

 const customStyles = {
    control: (base) => ({
      ...base,
      fontSize: 13,
      paddingTop: 3,
    }),
  };

Upvotes: 3

Views: 7237

Answers (2)

Roopesh G.
Roopesh G.

Reputation: 46

You almost got it correct. Just change the fontSize int 13 to string '13px'/'13em'. This will change the font size of the option selected.

To change the font size of the menu option, add the below code in customStyles:

menuPortal: base => ({
            ...base,
            fontSize: '13px'
        }),

Upvotes: 3

Allwyn Antony
Allwyn Antony

Reputation: 1

You could pass styles directly as props to react-select(hoping you're talking about the same)

<Select
  styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
  menuPortalTarget={document.body}
  isSearchable
  name="color"
  menuPlacement={menuPlacement}
  options={colourOptions}
  menuShouldScrollIntoView={false}
/>

For more help, you could also refer to the advanced docs in react-select https://react-select.com/advanced#portaling

Upvotes: 0

Related Questions