I'm using the react-select
library https://react-select.com/home#getting-started . Trying to reduce select to dimensions width: 90px; height: 23px
width: 90px; height: 23px
. However, when you click on it, select increases. How to set the above parameters so that select has a cay time of width: 90px; height: 23px
width: 90px; height: 23px
?
Demo here: 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;
}
Try using the props classNamePrefix
. If you don't use this, react-select creates dynamic prefix names such as css-tu25sd-c..
They aren't reliable.
<Select options={options} classNamePrefix='my-className-prefix' />
For more props info see: https://github.com/JedWatson/react-select#props Edited solution. Try use the classNamePrefix
props, update your css to match the dynamic css classes and run in your editor.
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;
}
Do you intend to limit the height to 23px? I checked your stackblitz project, and find that the inner div's height is bigger than 23px. React-select provide some customization options we can use. Please check my forked version: https://stackblitz.com/edit/react-pmbsvv to verify if it is something you need.
The following code is just a copy of the index.js file:
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"));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.