Изменить шрифт компонентаact-select с помощью темы

Question

Я пытаюсь изменить шрифт всего моего компонентаact-select (элемент управления, раскрывающийся список и т. Д.).Я использую темы Material-UI, поэтому я попытался установить тему:

<Select
  theme={theme}
/>

Но это не сработало.Это тоже не сработало:

  <Select
    theme={theme => ({
      ...theme,
      typography: {
        ...theme.typography,
        fontFamily: ["Montserrat", "sans-serif"].join(",")
      }
    })}
  />

Демонстрация здесь

Я понял, как это сделать со стилями ( demo ):

const customStyles = {
  container: (provided, state) => ({
    ...provided,
    fontFamily: ["Montserrat", "sans-serif"].join(",")
  }),
};

<Select
  styles={customStyles}
/>

Но было бы неплохо использовать темы, поскольку я уже создал тему со своим шрифтом.

Answer 1

Если вы посмотрите на theme.js файл ниже, вы заметите, что на данный момент нет опции font, поэтому нет возможности использовать этот реквизит для достижения того, что вы ищете.

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);