Question

我正在使用带有ng2-smart-table的angular 2。

这是我的代码。

settings = {
    mode:"external",
    actions:{add:false,position:'right',custom: [{ name: 'View', title: `<i class="fa fa-eye" aria-hidden="true"></i>` }]},
    edit: {
      editButtonContent: '<i class="fa fa-pencil-square" aria-hidden="true"></i>',
      saveButtonContent: '<i class="ion-checkmark"></i>',
      cancelButtonContent:'<i class="ion-close"></i>',
    },
    delete: {
      deleteButtonContent: '<i class="fa fa-trash" aria-hidden="true"></i>',
      confirmDelete: true
    },
    columns: {
       Check:{
        title: "Check",
        type: 'html',
        },
        filter: false
       },
       orderby:{
        title: "Name",
        filter: true
       },
       purchased:{
        title: "Purchased",
        type: 'html',
        },
        filter: false
       },
       shipto:{
        title: "Ship To",
        filter: true
       },
       date:{
        title: "Date",
        filter: true
       },
       total:{
        title: "Total Amount",
        filter: true
       },
       status: {
        title: "Status",
        filter: true
      }
    }
  };

我在表格中添加了自定义视图图标。它有效，但如何在ng2-smart-table中添加自定义css？

我试过这个

 ng2-smart-table thead > tr > th { background-color: blue; }

但它没有用。

Answer 1

尝试使用host来设置组件的样式，因为view encapsulation未设置。

:host /deep/ ng2-smart-table thead > tr > th  { 
        background-color:blue;  
}

有关host和hostcontext link

的更多信息

Answer 2

我在表格中进行了更改，其中包含以下SCSS文件中的更改

:host /deep/ ng2-smart-table-title a:focus { color: #009ECE; }

:host /deep/ ng2-smart-table thead > tr > th > div { color: #009ECE; }

:host /deep/ td.ng2-smart-actions a {cursor: pointer;color: #009ECE; }

Answer 3

我们可以直接使用以下代码在我的代码中使用相同的内容。

:host>>>table tr th {
  // your css here.
}

Answer 4

在设置对象

中使用以下配置

attr: {
        class: 'table table-bordered'
      },

和

 :host /deep/ ng2-smart-table { 
    font-size: 16px; 
}

示例：

settings = {
  columns: {
    id: {
      title: 'ID'
    },
    name: {
      title: 'Full Name'
    },
    username: {
      title: 'User Name'
    },
    email: {
      title: 'Email'
    }
  },
attr: {
        class: 'table table-bordered'
      }
};

Answer 5

[_nghost-c2] {
    font-size: 1.5rem !important;
}

这对我有用。

Answer 6

将CSS保留为主要的外部样式CSS文件或将ng2-smart-table放在div中，然后从div选择器中放置样式。例子-

<div class="div-class"><ng2-smart-table [settings]="ta"></ng2-smart-table></div>

.div-class th { background-color: blue; }

Answer 7

我正在实现以下目标

：host / deep / ng2-smart-table {font-size：medium; }

如何在ng2-smart-table中添加自定义css

7 个答案: