如何更改react中的css元素

发布于 2025-01-10 14:57:34 字数 780 浏览 0 评论 0原文

我在react中有下面的行，其中编写了三元运算符来根据条件设置不同的类，

<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是来自不同文件的引用

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

嘿看小鸭子会跑 2025-01-17 14:57:35

尝试使用这个

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

Try to use this

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

回复收藏 0 原文

愚人国度 2025-01-17 14:57:35

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

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

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

回复收藏 0 原文

~没有更多了~