我想减小React Select的大小。这是我的准则
<div> <Select options={workflowStepAction} /> </div>
我尝试了下面的代码。但是它不能正常工作。
<div> <Select maxMenuHeight={190} options={workflowStepAction} /> </div>
1mrurvl11#
我得到了答案。我认为下面是最小设置。我可以减少React选择的hight。
hight
这是代码,我用了TypeScript。
const targetHeight = 30; const styles = { control: (base: any) => ({ ...base, minHeight: 'initial', }), valueContainer: (base: any) => ({ ...base, height: `${targetHeight - 1 - 1}px`, padding: '0 8px', }), clearIndicator: (base: any) => ({ ...base, padding: `${(targetHeight - 20 - 1 - 1) / 2}px`, }), dropdownIndicator: (base: any) => ({ ...base, padding: `${(targetHeight - 20 - 1 - 1) / 2}px`, }), };
<Select styles={styles} />
5uzkadbs2#
我使用了样式 prop :
<Select defaultValue={selectedOption} onChange={setSelectedOption} options={options} menuPosition='fixed' menuPlacement='auto' styles={{ control: (baseStyles, state) => ({ ...baseStyles, minHeight: '25px', fontSize: '15px', }), dropdownIndicator: (base) => ({ ...base, paddingTop: 0, paddingBottom: 0, }), menuList: (base) => ({ ...base, fontSize: '12px', }), }} />
您可以在此处找到要选择的组件名称:https://react-select.com/componentsdropdownIndicator默认填充为8 px,所以要降低高度,必须将顶部/底部填充设置为0。我在组件menuList上使用fontSize来减小列表的字体大小,并使用属性menuPosition和menuPlacement来使菜单靠近减少的选择。
2条答案
按热度按时间1mrurvl11#
我得到了答案。我认为下面是最小设置。我可以减少React选择的
hight
。这是代码,我用了TypeScript。
5uzkadbs2#
我使用了样式 prop :
您可以在此处找到要选择的组件名称:https://react-select.com/components
dropdownIndicator默认填充为8 px,所以要降低高度,必须将顶部/底部填充设置为0。
我在组件menuList上使用fontSize来减小列表的字体大小,并使用属性menuPosition和menuPlacement来使菜单靠近减少的选择。