web-dev-qa-db-ja.com

React Select in v2のサイズを縮小する方法

新しいv2の反応選択コントロールは優れていますが、デフォルトでは大きすぎます。標準の選択コントロールと同じ高さに（好ましくは）シンプルな方法がありますか（Bootstrap v3を使用）？

react-select
8
Darren Oster

React-Select v2は感情CSS-in-JSを使用するため、選択コンポーネントとサブコンポーネントのスタイルを制御する新しい方法は、スタイルオブジェクトをstylesプロパティに渡すことです。 classNameを設定して、外部スタイルシートでスタイルを設定することもできます。

詳細/より良い情報 [〜＃〜] here [〜＃〜]

CSS-in-JSの方法

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

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

CSSの方法

<Select ... className="myClassName" ... />

.myClassName__control {
    height: 50px;
}
10
Evan Hennessy

MaxMenuHeightプロパティの値を渡してみてください：

<Select
  maxMenuHeight={190}
/>

ドキュメント を参照してください

8
ryanrain

@craigmichaelmartinがコメントしたものに加えて、controlのminHeightは上書きすることが重要であり、本当にそれを克服するために多くの場所で設定する必要があります。
36pxのテキスト入力要素の高さと一致させるために私が働いたのは次のとおりです（これらの設定はもちろんcssでも機能します）

const customStyles = {
  container: (provided) => ({
    ...provided,
    display: 'inline-block',
    width: '250px',
    minHeight: '1px',
    textAlign: 'left',
    border: 'none',
  }),
  control: (provided) => ({
    ...provided,
    border: '2px solid #757575',
    borderRadius: '0',
    minHeight: '1px',
    height: '42px',
  }),
  input: (provided) => ({
    ...provided,
    minHeight: '1px',
  }),
  dropdownIndicator: (provided) => ({
    ...provided,
    minHeight: '1px',
    paddingTop: '0',
    paddingBottom: '0',
    color: '#757575',
  }),
  indicatorSeparator: (provided) => ({
    ...provided,
    minHeight: '1px',
    height: '24px',
  }),
  clearIndicator: (provided) => ({
    ...provided,
    minHeight: '1px',
  }),
  valueContainer: (provided) => ({
    ...provided,
    minHeight: '1px',
    height: '40px',
    paddingTop: '0',
    paddingBottom: '0',
  }),
  singleValue: (provided) => ({
    ...provided,
    minHeight: '1px',
    paddingBottom: '2px',
  }),
};
6
jeffriestube

heightプロパティを設定すると、（複数の選択した値が次の行に流出する）オーバーフローがある場合でもその高さが保持されるように見えるため、値がボックスの外側になります。

dropdownIndicatorとclearIndicatorに上下のパディングを設定し、minHeightにcontrolを設定することで、この問題を解決しました。

const styles = {
  control: (base) => ({
    ...base,
    minHeight: 32,
  }),
  dropdownIndicator: (base) => ({
    ...base,
    paddingTop: 0,
    paddingBottom: 0,
  }),
  clearIndicator: (base) => ({
    ...base,
    paddingTop: 0,
    paddingBottom: 0,
  }),
};

<Select styles={styles}/>
4
Simon Tong

また、反応選択コンポーネント全体の高さに影響を与える可能性があるため、反応選択コンポーネントの入力フィールドのスタイルを設定することもできます。私の場合、これはマテリアライズからの干渉によって起こりました。

const customStyles = {
  input: styles => {
    return {
      ...styles,
      height: '1.8em'
  };
}
const App = () => (
  <Select
    styles={customStyles}
    options={...}
  />
);
1
xiaoju