52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
import React from "react";
|
|
import Select from "react-select";
|
|
|
|
const StyledSelect = (props) => {
|
|
const customStyles = {
|
|
control: (provided, state) => ({
|
|
...provided,
|
|
borderRadius: "10px",
|
|
background: "none",
|
|
borderColor: state.isFocused ? "rgba(255, 255, 255, 1)" : "rgba(255, 255, 255, 0.5)",
|
|
borderWidth: "2px",
|
|
boxShadow: "none",
|
|
cursor: "pointer",
|
|
color: "white",
|
|
"&:hover": {
|
|
borderColor: "rgba(255, 255, 255, 1)",
|
|
},
|
|
}),
|
|
option: (provided, state) => ({
|
|
...provided,
|
|
background: state.isSelected ? "rgba(255, 255, 255, 0.2)" : "none",
|
|
color: "white",
|
|
cursor: "pointer",
|
|
"&:hover": {
|
|
background: "rgba(255, 255, 255, 0.2)",
|
|
},
|
|
}),
|
|
menu: (provided) => ({
|
|
...provided,
|
|
zIndex: 10,
|
|
borderRadius: "10px",
|
|
background: "#561253",
|
|
}),
|
|
singleValue: (provided) => ({
|
|
...provided,
|
|
color: "white",
|
|
}),
|
|
input: (provided) => ({
|
|
...provided,
|
|
color: "white",
|
|
}),
|
|
placeholder: (provided) => ({
|
|
...provided,
|
|
color: "rgba(255,255,255, 0.6)",
|
|
}),
|
|
};
|
|
|
|
return <Select {...props} styles={customStyles} />;
|
|
};
|
|
|
|
export default StyledSelect;
|