How to target nested class name inside classNames? React

Question

I need to target nested class inside clasNames. Check my code first:

<div className={containerCss}> 
   <Container> </Container>
</div>

And inside CSS

.Header { 
  width: 100%;

  .test {
    width: 700px;
  }

  &.test--center {
    background: red;
  }
}

I want to add tes class and target Container

if test true to target class test

Answer 1

You should use a ternary operation.

<div className={isHeader ? "class if it is true" : "class if it is false}></div>