element-ui,iview组件样式修改，框架自带样式修改,/deep/击穿

太过爱你忘了你带给我的痛 2021-09-17 08:02 925阅读 0赞

项目中经常要修改框架自带的样式，但是写style，却没有效果

方法一：给组件加id / class，在style一面直接修改，注意style不要加scoped,vue可以有多个style  
结构：

<template>
      <Modal v-model="params.modal1" :title="tit" :mask-closable="false" id="noAssessmentDate">
        <Row>
          <Col span="24">
          <span>选择日期:</span>
          <DatePicker type="date" placeholder="开始日期" :options="options" v-model="startTime" style="width: 200px"></DatePicker>
          <span>至</span>
          <DatePicker type="date" placeholder="结束日期" :options="options" v-model="endTime" style="width: 200px"></DatePicker>
          <Button type="success" style="margin-left:20px" @click="add">添加</Button>
          </Col>
        </Row>
        <div style="padding:20px 0">
          <Tag v-for="(item,index) in list" :closable='item.closeable' :key="index" v-if="item.time" @on-close="handleClose(index)">{
       {item.time}}</Tag>
        </div>
        <div slot="footer">
        </div>
      </Modal>
    </template>

样式：

<style>
    #noAssessmentDate .ivu-modal {
      width: 686px !important;
    }
    #noAssessmentDate .ivu-tag {
      width: 105px;//修改tag的宽度
    }
    #noAssessmentDate .ivu-icon-ios-close-empty:before {
      color: red; //红x
    }
    </style>

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]  
方法二：  
利用深度/deep/深度修改组建的样式，可以直接写在到scoped作用域的style里面。（推荐）  
结构：

<Table :columns='tableColums' :data='tableData' stripe id="tab_keyTag" ref="table" @on-selection-change='selectionChange'></Table>

样式：

<style scoped>
    #tab_keyTag /deep/ .ivu-table .ivu-table-header .ivu-checkbox {
      display: none;
      cursor: none;
    }
    #tab_keyTag /deep/ .ivu-table .ivu-table-header label:after {
      content: "选择";
    }
    #tab_keyTag /deep/ .ivu-table .ivu-table-header .ivu-checkbox-wrapper {
      cursor: default;
      pointer-events: none;
    }
    </style>

关于/deep/，一张图看懂：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]  
看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]: /images/20210813/243530bc2a0144c0aeb88334cfba4261.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]: /images/20210813/5f8b6b890c8e449f8b9662ce11258e63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 2]: /images/20210813/055b2615c3e94893b96d519ad4a367c7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，925人围观）

还没有评论，来说两句吧...

相关阅读

相关修改placeholder样式

style> ::-webkit-input-placeholder \{ /\* WebKit, Blink, Edge \*/ col...

刺骨的言语ヽ痛彻心扉/ 2024年04月17日 21:54/ 0 赞/ 92 阅读

相关 JavaScript修改样式

建style元素修改样式 <body> <h1>helloworld</h1> <script type="text/ja...

蔚落/ 2024年04月17日 19:58/ 0 赞/ 75 阅读

相关修改Element-ui组件的样式无效？

框架vue2.0，使用element中自有些组件样式不合心意，但是在style中改不过来？ 1，想将某个组件样式全局统一，通过控制台f12查看组件类名，在App.vue的s

缺乏、安全感/ 2023年06月24日 04:47/ 0 赞/ 223 阅读

相关修改自带vant ui 样式方法

修改自带vant ui 样式方法 1. 使用 /deep/ 样式穿透 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVp

末蓝、/ 2023年02月15日 07:51/ 0 赞/ 20 阅读

相关 elementui Tabs组件修改样式自定义样式去掉底部横线等

默认： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

冷不防/ 2023年01月17日 02:26/ 0 赞/ 895 阅读

相关 element select修改样式选择器修改样式

.el-input\_\_inner 未改 ![在这里插入图片描述][20210115094452204.png] 改后 ![在这里插入图片描述][waterma

╰+攻爆jí腚メ/ 2023年01月04日 13:21/ 0 赞/ 334 阅读

相关 vue修改自带的title属性样式，title属性样式修改办法

1.定义id=‘title’ :data-title=“itemss.contactsCallTime2” 这个值 <div class="grid-content

待我称王封你为后i/ 2022年03月12日 05:11/ 0 赞/ 2233 阅读

相关小程序下拉框自定义样式picker修改样式picker-view修改样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

冷不防/ 2021年11月26日 23:36/ 0 赞/ 2181 阅读

相关 element-ui,iview组件样式修改，框架自带样式修改,/deep/击穿

项目中经常要修改框架自带的样式，但是写style，却没有效果方法一：给组件加id / class，在style一面直接修改，注意style不要加scoped,vue可以有多

太过爱你忘了你带给我的痛/ 2021年09月17日 08:02/ 0 赞/ 926 阅读

相关 uni-app 修改 radio/checkbox/switch 组件样式

我们在用 uni-app 开发前端页面时，往往需要修改一些组件的默认样式，特别是颜色。那么如何修改 radio/checkbox/switch（单选框/复选框/开关）的样...

朱雀/ 2021年03月29日 10:48/ 0 赞/ 3499 阅读