How to Change css element in react

Question

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

user18332436 · Accepted Answer · 2022-03-01 06:58:38Z

1

Try to use this

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

answered Mar 1, 2022 at 6:58

user18332436

Sign up to request clarification or add additional context in comments.

Comments

singhsterabhi · Accepted Answer · 2022-03-01 06:55:12Z

1

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%);
}

answered Mar 1, 2022 at 6:55

singhsterabhi

1371 silver badge10 bronze badges

1 Comment

Ashok Over a year ago

tried but it does not worked , shall i set whole css inline ?

Collectives™ on Stack Overflow

How to Change css element in react

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related