如何在 React 中更改 css 元素

Question

我在下面的行中写了三元运算符来根据条件class设置不同的

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

它工作正常但不是设置 Class2 ，如何更改 Class1 元素，如高度

所以在 Class1 中我的 css 是

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

而在 Class2 中，我的 css 是

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

所以唯一改变的是高度所以而不是写不同class2怎么只能改变高度此 css 是来自不同文件的引用

Answer 1

您可以直接使用样式标签设置高度：

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

由于其余样式在类中相同，您可以在 'Class1'

中设置它们

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

Answer 2

尝试使用这个

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

如何在 React 中更改 css 元素

How to Change css element in react

reactjs

styles