CODEWITHSUNDEEP
reactjsstyles
Ashok
Ashok

Reputation: 59

How to Change css element in react

I have below line in react where have written ternary operator to set different class as per condition

<div onClick={this.Testfunction.bind(this)}  className={this.state.noteArray.length >0?"Class1":"Class2"}>

it work fine but instead of setting Class2 , how can change Class1 element like height

So in Class1 my css is

    height: calc(100vh - 30em) !important;
    position: absolute;
    width: 385px;
    right: 147px;
    background: #f3f3f7;
    z-index: 10;
    box-shadow: 0px 1px 15px 3px rgb(0 0 0 / 30%);

And in Class2 my css is

  height: calc(100vh - 70em) !important;
    position: absolute;
    width: 385px;
    right: 147px;
    background: #f3f3f7;
    z-index: 10;
    box-shadow: 0px 1px 15px 3px rgb(0 0 0 / 30%);

So only change is height so instead of writing different class2 how can only height can be change this css is reference from different file

Upvotes: 0

Views: 95

Answers (2)

user18332436
user18332436

Reputation:

Try to use this

<div onClick={this.Testfunction.bind(this)}  style={{height: this.state.noteArray.length >0 ? "calc(100vh - 30em)" : "calc(100vh - 70em)"}}>

Upvotes: 1

singhsterabhi
singhsterabhi

Reputation: 127

You can set the height directly with a style tag:

<div onClick={this.Testfunction.bind(this)}  className="Class1" style={{height: `calc(100vh - ${this.state.noteArray.length >0?"30em":"70em"}) !important`}}>

Since rest of the styles are same in both the classes you can set them in 'Class1'

.Class1 {
   position: absolute;
   width: 385px;
   right: 147px;
   background: #f3f3f7;
   z-index: 10;
   box-shadow: 0px 1px 15px 3px rgb(0 0 0 / 30%);
}

Upvotes: 1

Related Questions