Это CSS для стиля antd, который я использую
style.css
.ant-table-tbody > tr > td, .ant-table-thead > tr > th
{
padding:4px;
}
tr:nth-child(odd){
background: #f1e6ff;
}
tr:nth-child(even){
background: white;
}
thead[class* = "ant-table-thead"] th{
background-color:#000 !important;
color: white;
font-weight: bold;
border-color: #000;
text-align: center;
}
.table_btn
{
margin:0 !important;
}
.ant-btn
{
margin:0;
}
.ant-table-tbody > tr:hover > td {
color: #fff;
}
index.less
@import "callout";
@import 'e-commerce';
@import "pricing-tables";
@import "login";
@import "dashboard";
@import "error";
@import "editor";
@import "testimonials";
tr:nth-child(odd){
background:inherit !important;
}
.ant-modal-content {
.ant-modal-close{
color: #fff !important;
}
.ant-modal-header {
background-color: #000000;
.ant-modal-title {
color: #fff !important;
}
}
}
.table-wrapper {
.ant-btn {
padding: 0 10px;
height: 30px;
font-size: 13px;
> .anticon {
+ span {
margin-left: 5px;
}
}
&.ant-btn-success {
color: #3d8918;
border-color: #d9d9d9;
&:hover {
background-color:#3d8918;
color: #fff;
}
}
&.ant-btn-danger {
color: #c70d17;
background-color:#fff;
&:hover{
background-color:#c70d17;
color: #fff;
}
}
}
.actions {
text-align: right;
.ant-input {
border-radius: 2px;
padding:0 10px;
font-size: 13px;
height: 30px;
}
}
.table-layout {
.ant-table-small{
> .ant-table-content{
> .ant-table-body {
margin: 0 !important;
> table {
> .ant-table-tbody{
> tr{
> td{
padding: 2px 8px !important;
font-size: 13px !important;
text-align:center;
min-width: 80px;
.ant-btn {
width:100px;
}
}
}
}
}
}
}
index.js
<Table
className = "table-layout"
columns = {this.state.columns}
dataSource = {filteredData}
rowClassName='data-row'
bordered = {true}
size = {"small"}
onRowDoubleClick = { (record, index, event) => this.handleEditModal(record) }
onRowClick = {(record, index, event) => this.handleRowClick(record)}
loading = {this.state.loading}
pagination = {{ pageSize: 14 }}
/>
Вот как Стол используется на странице индекса. style.css и index.less - это страницы для CSS.
Может ли кто-нибудь помочь мне написать один CSS на этой странице, чтобы сделать одну строку зеленым цветом? Я хочу сделать одну строку зеленой в зависимости от условия. Мне нужен CSS Мне нужно вызвать CSS на странице, где находится код






Посмотрите, помогут ли вам эти ссылки Jsfiddle. Они показывают 2 способа изменить цвет фона ваших строк.
https://jsfiddle.net/2b2376a4/
https://jsfiddle.net/2b2376a4/
data: [
{id:1, name: 'one', color: '#fff'},
{id:2, name: 'two', color: '#eee'},
{id:3, name: 'three', color: '#ddd'}
]
для первой ссылки
render(text, record) {
return {
props: {
style: { background: record.color },
},
children: <div>{text}</div>,
};
},
для второй ссылки
rowClassName = {(record) => record.color.replace('#', '')}
Как отключить :hover для таблицы antd?
Можем ли мы сделать это и для заголовков?
@ P-RAD Я не пробовал, но думаю, что можем. Вы также можете напрямую изменить CSS, выбрав .antd-table-head.
Примите этот ответ, чтобы другой разработчик тоже знал ответ.
На данный момент я нашел два способа сделать это:
Один из способов - использовать опору rowClassName таблицы:
.table-row-light {
background-color: #ffffff;
}
.table-row-dark {
background-color: #fbfbfb;
}
<Table
rowClassName = {(record, index) => index % 2 === 0 ? 'table-row-light' : 'table-row-dark'}
columns = {columns}
dataSource = {dataSource}
loading = {loading}
/>
Второй способ - использовать простой CSS.
.table-striped-rows tr:nth-child(2n) td {
background-color: #fbfbfb;
}
.table-striped-rows thead {
background-color: #f1f1f1;
}
<Table
className = "table-striped-rows"
columns = {columns}
dataSource = {dataSource}
loading = {loading}
/>
Обратите внимание, что rowClassName работает только для строк, поэтому для CSS в заголовках таблиц мы можем использовать только простой CSS, как указано выше.
добавить активный класс на основе условия и добавить CSS
tr.active { background-color: green;}