react页面样式一些实战技巧

1.根据条件或者状态值改变样式属性值

//循环内的值
<div className="tableright-content-div">
                          {ele.Plantinginfo.map((ele, index) => {  
                            return (
                              <div key={index} className="tableright-content">
                                <div style={{  paddingTop: `${Number(index)==0 ? '15px' : '0px'}`, paddingLeft: '15px' }}>
//状态值
 <div className="monitor-right-topdiv" style={{margin: `${airQualitysize == 4 ? '29px 0 0 20px':'29px 0 0 45px'}` }}>

2.antd组件中的页面tabs展示

         //tab页
  const panel = (
    <div className="panel1">
      <ReactEcharts
        option={option}
        style={{
          height: '400px',
          left: '-80px',
          width: '1640px',
          position: 'relative'
        }}
      />
    </div>
  );
       <Tabs
          defaultActiveKey="1"
          type="card"
          tabBarExtraContent={operations}
          onTabClick={onTabClick}
          items={items.map((ele, index) => {
            return {
              label: ele.Lable,
              key: ele.Key,
              children: panel
            };
          })}
        />

3.DIV阴影边界，立体感
理解：https://juejin.cn/post/6854573222483099656

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
.tableright-content-div {
    position: relative;
    border-radius: 4px;
    margin-bottom: 38px;
    box-shadow: inset 2px 0px 1px 0.1px rgba(63, 217, 163, 1);
    background-color: rgba(255, 255, 255, 1);
    width: 330px;
    height: 260px;
    }

一个网站提供好demo直接用：
https://getcssscan.com/css-box-shadow-examples?ref=producthunt

4.图片显示比例4：3

<Image className="tableft-content-zoomImage" src={ele.FarmImage} />
    .tableft-content-zoomImage{
      top:0;
      left:0;
      width:100%;
      height:60%;
      //padding-bottom: 75%;
      overflow:hidden;
      background-position: center center;
      background-repeat: no-repeat;
      -webkit-background-size:cover;
      -moz-background-size:cover;
      background-size:cover;
    }

5.img图片显示在div中间

     <div className="map-restore" onClick={restoreMap}>
          <img src={currentPoint}></img>
      </div>

.map-restore {
      position: fixed;
      flex-direction: row;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9;
      width: 32px;
      height: 32px;
      background: rgba(#000, 0.8);
      background-size: 32px 32px;
      border-radius: 4px;
      right: 50px;
      bottom: 100px;
      cursor: pointer;
    }

未完待续…