es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo dar estilo a un componente basado en su estado utilizando Styled Components?

06 Aug, 2023 Programación

Estoy tratando de cambiar el fondo de entrada según el useState hook en Styled Components en React.

Aquí está mi código:

const [searchActive, setSearchActive] = useState(true);
<div classname="search" searchactive="{searchActive}">
    <input id="input"> 
</div>

Aquí está mi código de Styled Component:

.search {
    background: ${(searchActive) => (searchActive ? "red" : "yellow")};
   }

Cualquier consejo sería muy apreciado.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    ¡Parece que vas por buen camino! Sin embargo, hay algunos ajustes necesarios para que funcione.

    Primero, deberás usar la propiedad css en Styled Components para interpoler adecuadamente el valor del estado.

    Tu código de styled component debería lucir así:

    .search {
  background: ${({ searchActive }) => (searchActive ? "red" : "yellow")};
}

    Ten en cuenta que estamos usando la propiedad searchActive para interpolar el valor del estado en lugar de usar searchActive directamente.

    A continuación, deberás pasar el valor del estado searchActive como una propiedad a tu componente Search:

    <div classname="search" searchactive="{searchActive}">
  <input id="input">
</div>

    Esto permitirá que tu styled component acceda al valor del estado searchActive y actualice el color de fondo en consecuencia.

    Si aún encuentras problemas, verifica que has importado useState desde la biblioteca de React y que tu componente Search se ha inicializado correctamente en tu componente de React.

Comments are closed.