Tukukkk

I'm trying to change the font of my entire react-select component (control, drop-down, etc). I'm using material-ui themes, so I tried setting theme:

<Select

  theme={theme}

/>

But that didn't work. This also didn't work:

  <Select

    theme={theme => ({

      ...theme,

      typography: {

        ...theme.typography,

        fontFamily: ["Montserrat", "sans-serif"].join(",")

      }

    })}

  />

Demo here

I figured out how to do it with styles (demo):

const customStyles = {

  container: (provided, state) => ({

    ...provided,

    fontFamily: ["Montserrat", "sans-serif"].join(",")

  }),

};



<Select

  styles={customStyles}

/>

But it would be nice to use themes, since I already created a theme with my font.

If you take a look at the theme.js file below you will notice that there no font option for now so no way to use this props to achieve what you're looking for.

import type { Theme } from './types';



export const colors = {

  primary: '#2684FF',

  primary75: '#4C9AFF',

  primary50: '#B2D4FF',

  primary25: '#DEEBFF',



  danger: '#DE350B',

  dangerLight: '#FFBDAD',



  neutral0: 'hsl(0, 0%, 100%)',

  neutral5: 'hsl(0, 0%, 95%)',

  neutral10: 'hsl(0, 0%, 90%)',

  neutral20: 'hsl(0, 0%, 80%)',

  neutral30: 'hsl(0, 0%, 70%)',

  neutral40: 'hsl(0, 0%, 60%)',

  neutral50: 'hsl(0, 0%, 50%)',

  neutral60: 'hsl(0, 0%, 40%)',

  neutral70: 'hsl(0, 0%, 30%)',

  neutral80: 'hsl(0, 0%, 20%)',

  neutral90: 'hsl(0, 0%, 10%)',

};



const borderRadius = 4;

const baseUnit = 4;  /* Used to calculate consistent margin/padding on elements */

const controlHeight = 38;  /* The minimum height of the control */

const menuGutter = baseUnit * 2;  /* The amount of space between the control and menu */



export const spacing = {

  baseUnit,

  controlHeight,

  menuGutter,

};



export const defaultTheme: Theme = {

  borderRadius,

  colors,

  spacing,

};



export type ThemeConfig = Theme | ((theme: Theme) => Theme);