Is there a way to customize react-select styles?
I am having issues with the positioning of react-select within its container, and I currently have to resort to using margin-bottom, which isn't an ideal solution.
Here is how it looks without margin-bottom:
without margin-bottom
css
.header {
height: 98px;
display: flex;
justify-content: space-between;
background-color: #222968;
align-items: center;
padding: 0 10px;
}
.header__title {
font-weight: 700;
color: white;
}
.header__select{
height: 64px;
width: 169px;
margin-bottom: -30px;
}
Script:
import * as React from 'react';
import Select from 'react-select';
const options = [
{ value: 'userName', label: 'username' },
{ value: 'logout', label: 'logout' },
]
export class Header extends React.Component {
render() {
return (
<div className='header'>
<span className='header__title'>Task Assistant Service</span>
<Select
className='header__select'
options= {options}
/>
</div>
);
}
}