Cómo personalizar reaccionar-seleccionar el componente?

Question 1

Tengo un pequeño problema con react-select componente de un restyling. Si usted echa un vistazo a sus oficiales doc verás todos los atributos que pueden ser rediseñado. El problema que tengo es que todo el texto que escribo hay bordes azules, y no se puede eliminar de ellos. También alrededor del contenedor.

Si me inspeccionar aquí es lo que me pasa:

Tiene como id react-select-3-input y no se puede eliminar que incluso si escribo directamente en chrome inspección no digamos hacerlo en el código.

Estoy usando nextjs como marco y he añadido un archivo de estilo.css y la importación en _app.tsx. He intentado añadir esto a ver qué pasa:

#react-select-2-input {
  background-color: red;
  color: red;
  font-size: 40;
  background-color: red;
}

Pero no pasa nada.

Cómo crees que me puede solucionar este problema?

Question 2

Si usted lee la documentación para reaccionar-seleccione usted puede ver que la documentación a orientar hacia el uso de la emoción más recto hacia adelante CSS.

Cuando la aplicación de este trabajo que debería hacer algo como esto:

const reactSelectStyles = {
    singleValue: (provided, state) => ({
        ...provided,
        color: 'inherit',
    }),
    menu: (provided, state) => ({
        ...provided,
        'z-index': 9,
    }),
    multiValue: (provided, state) => ({
        ...provided,
        color: state.isDisabled ? "#000" : "#fff",
    }),
};

Esto creará un objeto que se puede utilizar para el estilo

<Select
    styles={reactSelectStyles}
/>

Previsto en el código anterior hace que asegurarse de que el estilo predeterminado se incluye (por lo que puede omitir si se desea) y el estado pueden ser utilizados para hacer el render diferentes estilos dependiendo del estado de las reaccionar-seleccione.

Yo diría que en general va a tener un tiempo más difícil de resolver esta usando CSS normal ya que reaccionar-seleccionar (con la emoción) va a generar dinámicas de clases CSS que no chocan unos con otros.

Tor Raswill · Answer 1 · 2021-11-18T09:48:22

Si usted lee la documentación para reaccionar-seleccione usted puede ver que la documentación a orientar hacia el uso de la emoción más recto hacia adelante CSS.

Cuando la aplicación de este trabajo que debería hacer algo como esto:

const reactSelectStyles = {
    singleValue: (provided, state) => ({
        ...provided,
        color: 'inherit',
    }),
    menu: (provided, state) => ({
        ...provided,
        'z-index': 9,
    }),
    multiValue: (provided, state) => ({
        ...provided,
        color: state.isDisabled ? "#000" : "#fff",
    }),
};

Esto creará un objeto que se puede utilizar para el estilo

<Select
    styles={reactSelectStyles}
/>

Previsto en el código anterior hace que asegurarse de que el estilo predeterminado se incluye (por lo que puede omitir si se desea) y el estado pueden ser utilizados para hacer el render diferentes estilos dependiendo del estado de las reaccionar-seleccione.

Yo diría que en general va a tener un tiempo más difícil de resolver esta usando CSS normal ya que reaccionar-seleccionar (con la emoción) va a generar dinámicas de clases CSS que no chocan unos con otros.

Por supuesto lo hice así para las otras partes. Mi problema es con el cuadro azul se puede ver todo el texto. No puedo acceder a ella a través de la emoción, así que probé con el clásico de la css. El problema es que no puedo acceder a él, incluso mediante la inspección de Chrome.

Cómo personalizar reaccionar-seleccionar el componente?

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría