Necesito editar los estilos del select incluido por React, o de alguna forma sobreescribir el archivo css
import Select from 'react-select'
Más especificamente quiero editar el border-radius del select.
Gracias!
Para poder editar el css de 'react-select'
debes pasarle una propiedad styles
al .
En el caso de añadir un border-radius. Debes hacerlo como en el ejemplo anterior: borderRadius: 10
Te dejo más documentación por aquí. https://react-select.com/home#custom-styles
Un pequeño ejemplo:
const colourStyles = {
control: styles => ({ ...styles, backgroundColor: 'white' }),
option: (styles, { data, isDisabled, isFocused, isSelected }) => {
const color = chroma(data.color);
return {
...styles,
borderRadius: 30,
backgroundColor: isDisabled ? 'red' : blue,
color: '#FFF',
cursor: isDisabled ? 'not-allowed' : 'default',
...
};
},
...
};
export default () => (
<Select
defaultValue={items[0]}
label="Single select"
options={items}
styles={colourStyles}
/>
);