• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

156
Vistas
¿Cómo pasar accesorios a componentes con estilo?

Estoy tratando de crear una aplicación React de tal manera que el color de fondo se establezca en función de un accesorio.

El componente de la aplicación mantiene el estado isDarkMode, que es un booleano y se pasa al componente de encabezado y lo usa para diseñar el color de fondo del componente de encabezado a través de componentes con estilo. Consulte los códigos a continuación para obtener más información.

 const App = function () { const [isDarkMode, setIsDarkMode] = React.useState(true) return ( <main> <Header mode = {isDarkMode}/> </main> ) } const Section = styled.section` background-color: ${props => props.mode === true? "yellow" : "blue"}; padding: 0 80px; display: flex; justify-content: flex-start; align-items: center; ` export default function Header (props) { console.log(props) return ( <Section > <span >Where in the world?</span> <FontAwesomeIcon icon={faMoon} /> <span >DarkMode</span> </Section> ) }

El problema aquí es que el color de fondo para el componente Encabezado es azul incluso cuando isDarkMode está establecido en verdadero. Mi intención es poder establecer el color de fondo en el componente de encabezado en función del valor de isDarkMode.

Por favor ayuda

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Estás bastante ahí. Solo necesita pasar el mode como accesorio al componente Sección :

 <Section mode={props.mode}>

Documentos: https://styled-components.com/docs/basics#adapting-based-on-props

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda