如何在 v2 中减小 React Select 的大小 [英] How to reduce the size of React Select in v2

问题描述

新的 v2 react-select 控件很棒，但默认情况下太大了.是否有(最好)简单的方法可以将高度降低到与标准选择控件相同(使用 Bootstrap v3)?

The new v2 react-select control is great, but by default is too large. Is there a (preferably) simple way to reduce the height to the same as a standard select control (using Bootstrap v3)?

推荐答案

React-Select v2 使用情感 CSS-in-JS，因此控制选择组件和子组件的样式的新方法是将样式对象传递给styles 道具.您还可以使用外部样式表将 className 设置为样式.

React-Select v2 uses emotion CSS-in-JS so the new way to control style over the select components and sub-components is by passing a style object to the styles prop. You can also set a className to style with an external stylesheet.

const customControlStyles = base => ({
    height: 50,
});

<Select ... styles={{control: customControlStyles}} ... />

CSS 方式

<选择 ... className="myClassName" .../>

.myClassName__control {
    height: 50px;
}

这篇关于如何在 v2 中减小 React Select 的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！