Vue使用antd样式穿透的问题

2 years ago

source link: https://chegva.com/5242.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Vue使用antd样式穿透的问题

最近使用antd写前端页面，想改变一下表格的默认样式，发现css改了但是没效果，后面搜了下得使用样式穿透来解决。

<a-card
  class="progress"
  :title="$t('progress')"
  :bordered="false"
  :body-style="{ padding: 0 }"
>
  <a slot="extra">{{ $t("all") }}</a>
  <div>
    <standard-table
      class="p-table"
      :columns="columns"
      :dataSource="dataSource"
      :scroll="{ y: 150 }"
      :pagination="false"
      :size="small"
    >
      <div slot="description" slot-scope="{ text }">
        {{ text }}
      </div>
  </div>
</a-card>

JavaScript

less添加样式穿透：

.progress {
  margin-bottom: 24px;
  & /deep/ .ant-card-head {
    border-bottom: none;
  }
  .p-table {
    max-height: 200px;
    margin-top: -32px;
    & /deep/ .ant-table-thead > tr > th,
    .ant-table-tbody > tr > td {
      padding: 8px 8px 8px 12px;
      overflow-wrap: break-word;
      background: #fff;
      font-size: 12px;
    }
    & /deep/ .ant-table-tbody .ant-table-row td {
      padding-top: 8px;
      padding-bottom: 8px;
      font-size: 12px;
      border: none;
    }
  }
}

JavaScript

这样就可以看到改变后的效果了。

Recommend

lutaonan.com 6 years ago
Cache

高效的 GraphQL + Antd

本文同步发布在 https://gist.github.com/djyde/955aa3f8f46116d648d44a743970b089 （请在那里进行讨论）在过去的几年，不论是面...

掘金 juejin.im 6 years ago
Cache

AntD 圣诞节彩蛋事件

此文仅代表个人立场，利益不相关。回顾今早一到公司，就发现群里有人说 antd 组件的样式变了，所有的Button组件都被加上了雪花，接着就看到 GitHub 上的 issue，几乎所有前端相关的群都在讨论这件事。而 antd 的维护者偏右似乎还没有意识到

www.zoo.team 5 years ago
Cache

Antd Form 实现机制解析

背景在中后台业务中，表单页面基础的场景包括组件值的收集、校验和更新。在 to B 业务中，表单页面的需求往往更复杂和定制化，除了上述的基本操作，还要处理包括自定义表单组件、表单联动、表单的异步检验等复杂场景，在一些...

www.v2ex.com 3 years ago
Cache

求推荐一个轻量级的 react ui 库，不想用 antd

V2EX › React 求推荐一个轻量级的 react ui 库，不想用 antd dmjob2015222 · 1 小...

segmentfault.com 3 years ago
Cache

lerna+umi+antd+qiankun 搭建微服务过程

公司一个开发迭代两年的项目因后期需要扩展更多的业务板块需要进行拆分，一是要满足后期不断新增板块业务不对现有业务产生影响，再者就是目前存在单项目业务量过大，开发维护难度极大，于是不得不考虑将现有业务板块进行微服务化拆分，以满足后期的需求。

paugram.com 3 years ago
Cache

Antd 4 表单校验调用其他表单项

今天又来了个新的需求，需要两个联动的输入框，而它们之间的“联动”在于，前者为王，后者不能大于前者的值。举个简单的例子，卖商品的最低价格 <= 最高价格，最高价格不可能比最低价格要低吧。要知道 Antd 4 和 3 的写法不太相同，4 主要使用的...

zhuanlan.zhihu.com 3 years ago
Cache

antd mobile v5 它悄悄的来了

antd mobile v5 它悄悄的来了桃翁公众号：前端桃园在 React 领域里，一直缺...

segmentfault.com 3 years ago
Cache

Vite 2.0 + React + TypeScript + Antd 搭建简单脚手架

Vite 2.0 + React + TypeScript + Antd 搭建简单脚手架Vite 出来好一段时间了，最开始支持 Vue，而现在已经不受框架限制了。而 Vite 解决的是对于项目每次启动与打包构建等待时间长的问题...

mrleidesen.github.io 2 years ago
Cache

antd datepicker 报错问题

MrLeiDeSen's Blog antd datepicker 报错问题2022-08-30 16:19:46 · MrLeiDeSen

www.fly63.com 2 years ago
Cache

vue中的scoped属性和样式穿透

本文主要介绍了vue样式的scoped属性,和样式穿透的几种实现方式，文章对示例

Vue使用antd样式穿透的问题

Vue使用antd样式穿透的问题

Recommend

About Joyk