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