Запретить расширяет «React-select» при нажатии на него - PullRequest
Новая
       8

Запретить расширяет «React-select» при нажатии на него

2 голосов
/ 13 октября 2019

Я использую библиотеку react-select https://react -select.com / home # Getting-Start . Пытаясь уменьшить выборку до размеров width: 90px; height: 23px. Однако, когда вы нажимаете на нее, выберите увеличивается. Как установить вышеприведенные параметры так, чтобы select имел время перехода width: 90px; height: 23px?

Демо здесь: https://stackblitz.com/edit/react-sk7g4x

import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <Select options={options} />
    );
  }
}

CSS 

.css-2b097c-container {
  width: 90px;
  height: 23px;
  font-size: 10px;
}

.css-yk16xz-control {
  min-height: 23px;
}

.css-1pahdxg-control {
  min-height: 23px;
}

.select__control--is-focused {
  min-height: 23px;
}

.css-tu25sd-control {
  height: 23px;
}

.selectSort .css-aohzbe-control {
  height: 23px;
}

.selectSort .css-1hwfws3 {
  padding: 0;
}

.css-tlfecz-indicatorContainer {
  padding: 0;
}

.css-yk16xz-control {
  height: 23px;
}

Ответы [ 2 ]

2 голосов
/ 13 октября 2019

Попробуйте использовать реквизит classNamePrefix. Если вы не используете это, response-select создает динамические имена префиксов, такие как css-tu25sd-c.. Они ненадежны.

<Select options={options} classNamePrefix='my-className-prefix' />

Для получения дополнительной информации о реквизитах см .: https://github.com/JedWatson/react-select#props Отредактированное решение. Попробуйте использовать реквизиты classNamePrefix, обновите свой css, чтобы он соответствовал динамическим классам css, и запустите в своем редакторе. 

h1, p {
  font-family: Lato;
}

.css-2b097c-container {
  width: 90px;
} 

.my-className-prefix-container,
.my-className-prefix__control {
  width: 90px !important;
  height: 3px !important;
}

.my-className-prefix__value-container,
.my-className-prefix__indicator-separator,
.my-className-prefix__dropdown-indicator {
  position: relative;
  bottom: 8px;
}

.my-className-prefix__control--is-focused {
  height: 23px;
}

.select__control--is-focused,
.css-1pahdxg-control {
  min-height: 23px;
}

.my-className-prefix__placeholder,
.my-className-prefix__value-container,
.my-className-prefix__menu {
  font-size: 10px;
}

.css-yk16xz-control {
  min-height: 23px;
  max-height: 23px;
}
0 голосов
/ 15 октября 2019

Вы намерены ограничить высоту до 23 пикселей? Я проверил ваш проект stackblitz и обнаружил, что высота внутреннего div больше 23px. React-select предоставляет некоторые параметры настройки , которые мы можем использовать. Пожалуйста, проверьте мою разветвленную версию: https://stackblitz.com/edit/react-pmbsvv, чтобы убедиться, что это то, что вам нужно.

Следующий код является просто копией файла index.js: 

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
import Select from "react-select";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

const customStyles = {
  control: (provided, state) => ({
    ...provided,
    height: 23,
    width: 90,
    minHeight: 23
  }),
  valueContainer: (provided, state) => ({
    ...provided,
    paddingTop: 0
  }),
  dropdownIndicator: (provided, state) => ({
    ...provided,
    height: 20,
    paddingTop: 0
  })
};
class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
      <Select
        options={options}
        styles={customStyles}
        classNamePrefix="my-className-prefix"
      />
    );
  }
}

render(<App />, document.getElementById("root"));
...