0

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!

1 respuesta 1

0

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}
  />
);

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.