Estoy creando una ventana emergente en React js y tengo un div con una identificación cambiante basada en un gameOver.winner booleano Ahora mismo configuré gameOver.winner en verdadero.
import React, { useContext } from 'react' import { AppContext } from '../../../App' import './GameOver.css' const GameOver = () => { const { currAttempt, setCurrAttempt, grid, setGrid, gameOver, setGameOver} = useContext(AppContext) console.log(gameOver.winner) return ( <div className="gameOver" ** id={gameOver.winner}> ** <div className="gameOverInner"> <h1>Game Over</h1> <h2>{gameOver.winner ? "You Win!" : "You Lose!"} - {currAttempt.currRow}</h2> </div> </div> ) } export default GameOver En GameOver.css estoy llamando a esta identificación
.gameOver[id=true]{ top: 0; left: 0; width: 25%; background-color: rgb(41, 41, 41); display: flex; justify-content: center; align-items: center; z-index: 2; }Sin embargo, mi salida no tiene estilo.
Si gameOver.winner es un booleano, entonces no generará un nodo <div id="true"> al DOM. React no acepta valores booleanos para el id prop en elementos html intrínsecos (debería ver un error en la consola del navegador al respecto). Si desea agregar un estilo especial a su div basado en un valor booleano, le sugiero agregarle una clase cuando gameOver.winner sea verdadero.
<div className={`gameOver ${gameOver.winner ? 'winner' : ''}`}> Luego, en su archivo css, puede apuntarlo con el selector .gameOver.winner .