10

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

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

安志合个人博客，版权所有 丨 如未注明，均为原创 丨 转载请注明转自：https://chegva.com/5242.html | ☆★★每天进步一点点,加油!★★☆ | 

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK