Question 232767 in CSS Question posted in
Some basic documentation can be found here.

Referring to a CSS Module within a ternary operator

Given the div structure

<div className={
   `${style.cell} 
      ${cell === Player.Black ? "black" : cell === Player.White ? "white" : ""}`}key={colIndex}/>

And the related CSS

.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;
}

How can I refer to the .cell.black and .cell.white class within the conditional using style... similar to how I would if className was

{`cell ${cell === Player.Black ? "black" : cell === Player.White ? "white" : ""}`}

and not located inside a module (ie import style from './Game.module.css')?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    This accomplished what I needed and still inherited the properties of .cell

    className={`${style.cell} ${cell === Player.Black ? style.black: cell === Player.White ? style.white : ""}`}

  2. 0

    You can refer to the .cell.black and .cell.white classes within the conditional using the following syntax:

    className={
   `${style.cell} 
      ${cell === Player.Black ? "cell.black" : cell === Player.White ? "cell.white" : ""}`}
    Login or Signup to reply.
  3. 0

    You can refer to the following:

    <div className={`${cell === Player.Black? style.cell + " black" : cell === Player.White ? style.cell + " white" : style.cell}`} key={colIndex}/>

    or you can make a function and return a CSS string like the one below:

    const getCellStyle = () => {
    return cell ${cell === Player.Black ? " black" : cell === Player.White ? " white" : ""}
    }

    <div className={getCellStyle} key={colIndex}/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search