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

使用主题更改反应选择组件的字体

1 个答案: