gpt4 book ai didi

material-ui - 使用主题更改 react 选择组件的字体

转载 作者:行者123 更新时间:2023-12-02 02:48:16 25 4
gpt4 key购买 nike

我正在尝试更改整个 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}
/>

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

最佳答案

如果你看一下 theme.js file在下方您会注意到目前没有font 选项,因此无法使用此 Prop 来实现您正在寻找的内容。

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

关于material-ui - 使用主题更改 react 选择组件的字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53384707/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com