antd-vue（1.7.8版本）常见组件的样式修改

一、antd-vue（1.7.8版本）常见组件

Button

<template>
  <div class="mybutton">
    <a-button> ceshiwenbenzheshiyiduan </a-button>
  </div>
</template>

<script>
export default {
  name: 'test'
}
</script>

<style scoped>
/* 默认字体和背景色 */
.mybutton >>> .ant-btn {
  color: red;
  background-color: skyblue;
  border: 1px solid red;
  border-radius: 4px;
  padding: 0 15px;
  height: 32px;
  line-height: 32px;
  font-weight: 400;
  font-size: 14px;
}
/* 鼠标移入后样式 */
.mybutton >>> .ant-btn:hover {
  color: #40a9ff;
  background-color: #fff;
  border: 1px solid #40a9ff;
}
</style>

Table

<template>
  <div class="mytable">
    <a-table>
      <template slot="operation" class="action">
        <span><a-button>Edit</a-button></span>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
    }
  }
}
</script>

<style scoped>
/* --------------表格-------------- */
/* 最外层的table */
.mytable >>> .ant-table {
  width: 1500px;
  height: 500px;
  overflow-y: auto;
}
/* table的表头 */
.mytable >>> .ant-table-thead > tr > th {
  height: 50px;
  padding: 0px 0px;
  color: rgba(255, 0, 0, 0.85);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  background: blue;
  border-bottom: 3px solid red;
}
/* table的表内容 */
.mytable >>> .ant-table-tbody > tr > td {
  height: 50px;
  padding: 0px 0px;
  color: rgba(255, 0, 0, 0.85);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  background: skyblue;
  border-bottom: 3px solid green;
}
/* table 鼠标移动，变动背景色 */
.mytable
  >>> .ant-table-tbody
  > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
  > td {
  background: green;
}
/* table 嵌套的button修改样式（例如：action） */
/* 原button样式 */
.mytable >>> .ant-btn {
  color: red;
  background-color: skyblue;
  border: 1px solid red;
  border-radius: 4px;
  padding: 0 15px;
  height: 32px;
  line-height: 32px;
  font-weight: 400;
  font-size: 14px;
}
/* 鼠标移入后样式 */
.mytable >>> .ant-btn:hover {
  color: #40a9ff;
  background-color: #fff;
  border: 1px solid #40a9ff;
}
/* --------------分页器-------------- */
/* 分页器位置 */
.mytable >>> .ant-pagination {
  /* 原始 */
  float: right;
  margin: 16px 0;
  font-size: 14px;
}
/* 上一页 */
.mytable >>> .ant-pagination-prev {
  min-width: 40px;
  height: 40px;
  line-height: 40px;
  margin-right: 15px;
}
.mytable >>> .ant-pagination-prev > a {
  font-size: 16px;
  text-align: center;
  background-color: skyblue;
  border: 1px solid red;
  border-radius: 9px;
}
.mytable >>> .ant-pagination-prev > .ant-pagination-item-link:hover {
  color: #fff;
  border-color: #fff;
  background-color: #000;
}
/* 下一页 */
.mytable >>> .ant-pagination-next {
  min-width: 40px;
  height: 40px;
  line-height: 40px;
  margin-right: 15px;
}
.mytable >>> .ant-pagination-next > a {
  font-size: 16px;
  text-align: center;
  background-color: skyblue;
  border: 1px solid red;
  border-radius: 9px;
}
.mytable >>> .ant-pagination-next > .ant-pagination-item-link:hover {
  color: #fff;
  border-color: #fff;
  background-color: #000;
}
/* 后5页 */
.mytable >>> .ant-pagination-jump-next {
  min-width: 40px;
  height: 40px;
  line-height: 40px;
  margin-right: 15px;
}
.mytable >>> .ant-pagination-item-container > i {
  color: red;
}
/* 页码 */
.mytable >>> .ant-pagination-item {
  min-width: 32px;
  height: 32px;
  margin-right: 8px;
  line-height: 30px;
  background-color: skyblue;
  border: 2px solid green;
  border-radius: 4px;
}
.mytable >>> .ant-pagination-item a {
  padding: 0 6px;
  color: red;
}
.mytable >>> .ant-pagination-item-active {
  background-color: #fff;
  border: 2px solid red;
}
.mytable >>> .ant-pagination-item-active a {
  color: yellowgreen;
}
.mytable >>> .ant-pagination-item:hover {
  background-color: #fff;
  border: 2px solid red;
}
.mytable >>> .ant-pagination-item:hover a {
  color: yellowgreen;
}
</style>

Input

<template>
  <div class="myinput">
    <a-input-search placeholder="input search text" enter-button />
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      data: [],
      columns: []
    }
  }
}
</script>

<style scoped>
.myinput >>> .ant-input {
  border: 1px solid red;
  background-color: transparent;
  height: 32px;
  padding: 4px 11px;
  font-size: 18px;
}
.myinput >>> .ant-input:hover {
  border-color: blue;
}
.myinput >>> .ant-input:focus {
  border-color: blue;
}
.myinput >>> .ant-btn {
  color: #f5222d;
  background-color: #022e07;
  border-color: #f5222d;
  margin-left: 10px;
}
</style>

Tabs 标签页

<template>
  <div class="mytabs">
    <a-tabs>
      <a-tab-pane key="1" tab="Tab 1"> Content of tab 1 </a-tab-pane>
      <a-tab-pane key="2" tab="Tab 2"> Content of tab 2 </a-tab-pane>
      <a-tab-pane key="3" tab="Tab 3"> Content of tab 3 </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
    }
  }
}
</script>

<style scoped>
/* 位置(默认居中） */
.mytabs >>> .ant-tabs-nav-scroll {
  position: relative;
  height: 50px;
  background-color: pink;
}
.mytabs >>> .ant-tabs-nav {
  position: absolute;
  display: block;
  top: 0px;
  left: 0px;
}
/* tabs样式 */
.mytabs >>> .ant-tabs-tab {
  margin: 0px;
  padding: 12px 26px;
  color: #fff;
}
.mytabs >>> .ant-tabs-tab:hover {
  color: red;
}
.mytabs >>> .ant-tabs-tab-active {
  color: red;
  border: 2px solid red;
  background-color: blue;
}
/* tabs 取消默认下划线样式 */
.mytabs >>> .ant-tabs-ink-bar {
  background-color: transparent;
  height: 0px;
}
</style>

Menu 样式