ant-desgin for vue. Modal组件修改样式无效问题

最新推荐文章于 2024-05-07 19:36:48 发布

今日无事勾栏听曲

最新推荐文章于 2024-05-07 19:36:48 发布

阅读量1.4k

点赞数

分类专栏：杂记 mars3d技术文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44806249/article/details/126321326

版权

mars3d技术同时被 2 个专栏收录

36 篇文章 5 订阅

订阅专栏

杂记

10 篇文章 0 订阅

订阅专栏

简介：在最新的项目研发过程中使用ant-desgin 的model组件时，需要重新写样式，发现无论是加deep还是去掉scoped都无法生效。是因为它需要挂载到html节点上
详细使用过程如下

<div  ref="createCreative" class="create-creative">
    <Modal
      v-model:visible="visible"
      :getContainer="() => createCreative"
      title="标签"
      @ok="handleOk"
      :keyboard="false"
    >
    </Modal>
  </div>

在这里插入图片描述

  .create-creative {
    :deep(.ant-modal) {
      .ant-modal-content {
        width: 320px !important;
        height: 240px;
        background: #ffffff;
        box-shadow: 0px 4px 19px 1px rgba(25, 33, 47, 0.2);
        border-radius: 8px;

        .ant-modal-close-x {
          color: #19212f;
          width: 56px;
        }

        .ant-modal-header {
          border-radius: 8px;
        }

        .ant-modal-footer {
          text-align: center;
          border-top: none;
          margin-top: 20px;
          .ant-btn-primary {
            background: #2468f1;
            color: #fff;
          }
        }
      }
    }
  }