Consider the following HTML structure
<div className={
`${style.cell}
${cell === Player.Black ? "black" : cell === Player.White ? "white" : ""}`} key={colIndex}/>
Along with the associated CSS styles
.cell {
width: 30px;
height: 30px;
border: 1px solid #000;
background-color: burlywood;
cursor: pointer;
}
.black {
background-color: #000;
color: white;
text-align: center;
font-weight: bolder;
}
.white {
background-color: #fff;
color: black;
text-align: center;
font-weight: bolder;
}
Is there a way to reference the .cell.black and .cell.white classes within the conditional statement using style... like you would if className was
{`cell ${cell === Player.Black ? "black" : cell === Player.White ? "white" : ""}`}
even when they are not stored inside a module (e.g.
import style from './Game.module.css'