Styling ReactSelect with CSS-in-JS - css

Question

Here is a link to another good stackoverflow post that I am basing my initial answer on. I am attempting to style my ReactSelect component so that it looks something like this:
It's not obvious from the screenshot above, but the select box has a much smaller height (29 pixels total) than the default ReactSelect, and that's my first objective with styling (reduce the height). Here is my code right now attempting to reduce the height, derived mainly from the stackoverflow post i've linked to:
const customStyles = {
control: base => ({
...base,
height: 22,
minHeight: 22
})
};
const customControlStyles = base => ({
...base,
height: 22,
minHeight: 22
});
const selectOptions = [
{ value: 'pct', label: 'FG Percentage' },
{ value: 'attFreq', label: 'FG Frequency' },
{ value: 'made', label: 'Total Makes' },
{ value: 'att', label: 'Total Attempts' }];
const shotdistSelect =
(<Select
// arrowRenderer={null}
maxMenuHeight={30}
placeholder={'Knickerbockers'}
isClearable={false}
isDisabled={this.props.loading}
backspaceRemovesValue={false}
isSearchable={true}
value={this.state.shotdistType}
onChange={this.handleShotdistChange}
options={selectOptions}
styles={{ control: customControlStyles }}
// styles={{ customStyles }}
/>);
And here's the result of the example above:
... not exactly what I was going for. Further, when I use customStyles rather than customControlStyles in the example above, the styling no longer works, and I am not sure what I've done wrong in creating customStyles that is causing it to not work. I figure I will need to do something similar to customStyles, as it seems I'll need to style more than just the control part of ReactSelect.
And 2nd, I'd like to remove both the vertical bar and down caret in the ReactSelect, similar to the initial screenshot.
Any help with this styling would be greatly appreciated!! I've been working on this for quite some time with no success yet. Thanks!

Answer 1

Option 1
Make sure you're using the most up-to-date version of react-select (v2.3.0). I was able to accomplish what you want by using a bit of CSS with the style keys offered by react-select.
Working example: https://codesandbox.io/s/7y6901y950
containers/Form/Form.js
import React, { Component } from "react";
import CustomSelect from "../../components/CustomSelect/CustomSelect";
const fgOptions = [
{ value: "pct", label: "FG Percentage" },
{ value: "attFreq", label: "FG Frequency" },
{ value: "made", label: "Total Makes" },
{ value: "att", label: "Total Attempts" }
];
const saveOptions = [
{ value: "pct", label: "Save Percentage" },
{ value: "sFreq", label: "Save Frequency" },
{ value: "tSaves", label: "Total Saves" }
];
const assistOptions = [
{ value: "pct", label: "Assist Percentage" },
{ value: "aFreq", label: "Assist Frequency" },
{ value: "tAssist", label: "Total Assists" }
];
export default class Form extends Component {
handleChange = (name, value) => {
this.setState({ [name]: value });
};
handleSubmit = e => {
e.preventDefault();
alert(JSON.stringify(this.state, null, 4));
};
render = () => (
<form onSubmit={this.handleSubmit} className="app-container">
<h1>React Select Styling</h1>
<CustomSelect
name="fg"
label="FG:"
placeholder="Field Goals"
handleChange={this.handleChange}
selectOptions={fgOptions}
/>
<CustomSelect
name="assists"
label="AS:"
placeholder="Assists"
handleChange={this.handleChange}
selectOptions={assistOptions}
/>
<CustomSelect
name="saves"
label="SV:"
placeholder="Saves"
handleChange={this.handleChange}
selectOptions={saveOptions}
/>
<button type="submit" className="submit">
Submit
</button>
</form>
);
}
components/CustomSelect/CustomSelect.js
import React from "react";
import PropTypes from "prop-types";
import Select from "react-select";
import { labelStyles, selectStyles } from "./styles/styles";
const CustomSelect = ({
handleChange,
label,
name,
placeholder,
selectOptions,
value
}) => (
<div className="select-container">
<label htmlFor={name} style={labelStyles}>
{label}
</label>
<Select
name={name}
placeholder={placeholder}
isClearable={false}
backspaceRemovesValue={false}
isSearchable={true}
value={value}
onChange={value => handleChange(name, value)}
options={selectOptions}
styles={selectStyles}
/>
</div>
);
CustomSelect.propTypes = {
handleChange: PropTypes.func.isRequired,
label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
placeholder: PropTypes.string.isRequired,
selectOptions: PropTypes.arrayOf(
PropTypes.shape({
label: PropTypes.string.isRequired,
value: PropTypes.string.isRequired
})
),
value: PropTypes.objectOf({
value: PropTypes.string,
label: PropTypes.string
})
};
export default CustomSelect;
components/CustomSelect/styles/styles.js (see documentation for style keys -- if you add longer labels, then you must adjust labelStyles width property; otherwise, the label to select ratio will vary)
export const selectStyles = {
option: (provided, state) => ({
...provided,
borderBottom: "1px dotted pink",
color: state.isSelected ? "blue" : "",
fontSize: 16,
backgroundColor: state.isSelected ? "#eee" : "",
textAlign: "left",
cursor: "pointer"
}),
container: base => ({
...base,
width: "100%"
}),
control: base => ({
...base,
height: 32,
minHeight: 32,
fontSize: 16,
borderRadius: 0,
width: "100%",
textAlign: "left",
cursor: "pointer"
}),
dropdownIndicator: base => ({
...base,
display: "none"
}),
indicatorSeparator: base => ({
...base,
display: "none"
}),
valueContainer: base => ({
...base,
padding: 0,
paddingLeft: 2
})
};
export const labelStyles = {
fontSize: 16,
paddingTop: 8,
marginRight: 5,
width: 50,
textAlign: "right"
};
styles.css
.app-container {
padding: 0px 20px;
text-align: center;
font-family: sans-serif;
}
.select-container {
display: flex;
margin: 0 auto;
width: 100%;
max-width: 500px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-flex: 1;
margin-bottom: 10px;
}
.submit {
cursor: pointer;
background-color: #1e87f0;
color: #fff;
border: 1px solid transparent;
box-sizing: border-box;
padding: 0 30px;
vertical-align: middle;
font-size: 14px;
line-height: 38px;
text-transform: uppercase;
transition: 0.1s ease-in-out;
transition-property: color, background-color, border-color;
}
.submit:hover {
background-color: #0f7ae5;
color: #fff;
}
.submit:focus {
background-color: #1e87f0;
color: #fff;
outline: none;
}
Option 2
Or, you can do everything without using react-select, which I'd highly recommend as it excludes yet another dependency! As such, you have the option to style it as you wish (entirely through css, entirely through css-in-js or a combination).
Working example: https://codesandbox.io/s/w72k49nn27 (this example only uses css)