使用主题更改 react-select 组件的字体

Question

我正在尝试更改整个 react-select 组件（控件、下拉列表等）的字体。我正在使用 material-ui 主题，所以我尝试设置主题：

<Select
  theme={theme}
/>

但这没有用。这也不起作用：

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

Demo here

我想出了如何使用样式 (demo):

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

<Select
  styles={customStyles}
/>

但是使用主题会很好，因为我已经用我的字体创建了一个主题。

Answer 1

如果您查看下面的 theme.js file，您会发现目前没有 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);

使用主题更改 react-select 组件的字体

Change font of react-select component using theme

react-select

material-ui