/deep/ 深度选择器

2021-07-05 18:01:29 阅读：185 来源： 互联网

标签：ant deep height padding modal 深度组件选择器

当style添加scoped时，表示组件私有化，可使组件模块化，其样式不会污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了。
但这时需要引用公共组件时，无法改变公共组件样式，此时需要/deep/深度选择器，此时可以修改公共组件样式。
例如a-modal，如下：
基础a-modal如下图：
在这里插入图片描述
修改如下：
vue

<div class="box">
    <a-modal v-model="visibles" :title="title" class="modal" :footer="null" :style="{marginTop: clientHeight < 800 ? videoOrAssess ? '-60px' : '50px' : videoOrAssess ? '10px' : '50px'}" :width="width" @ok="handleOk" @cancel="cancel">
      <div style="height: 240px;width: 100%">
        <a-form layout="horizontal" style="width: 100%">
          <a-form-item label="审核结果:"  :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" style="margin-bottom: 15px">
            <a-radio-group v-model="examTypeOne">
              <a-radio value="1">未发现疑似事件</a-radio>
              <a-radio value="2">有疑似事件</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="备注："  :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" style="margin-bottom: 15px">
            <a-textarea cols="30" rows="5" style="width:100%;" v-model="assess_txt"></a-textarea>
          </a-form-item>
        </a-form>
        <div :style="{width: '100%',padding: '5px 5px',background: '#fff',textAlign: 'center',zIndex: 1,}">
            <a-button :style="{ marginRight: '8px' }" type="primary" @click="handleOk">通过</a-button>
            <a-button @click="cancel">取消</a-button>
        </div>
      </div>

    </a-modal>

    <!-- 弹窗 编辑单个图例颜色 -->
  </div>

<style lang="less" scoped>
.box{
    /*/deep/ .ant-modal-content{
      position: relative;
      background-color: #00000000 !important;
      border: 0;
      border-radius: 4px;
      background-clip: padding-box;
      box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
    }*/
    /deep/ .ant-modal-header{
      background: #0c8cfa;
      height: 32px;
      padding: 5px 0;
      .ant-modal-title{
        text-align: center;
        margin: 0 auto;
        color: #fafafa;
      }
    }
    /deep/ .ant-modal-close-x{
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /deep/ .ant-modal-body{
      /*padding: 0 !important;*/
      font-size: 0 !important;
      line-height: 1 !important;
      padding: 10px;
     /* padding: 0px;
      padding-left: 5px;*/

      .turnback{
        .imgt{
          height: 0px;
        }
      }
      .turnback:hover{
        .imgt{
          height: 20px;
        }
      }
      .tabs{
        tr{
          .img1{
            height: 0px;
          }
        }
        tr:hover{
          background: #E6F7FF;
          .img1{
            height: 20px;
          }
        }
      }
    }
  }
</style>

如下图：
在这里插入图片描述

标签：ant,deep,height,padding,modal,深度,组件,选择器
来源： https://blog.csdn.net/Bruce_byan/article/details/118495013

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

/deep/ 深度选择器