CSS for colouring one row of antd table in react - css

Question

This is the CSS for the antd style I'm using
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 }}
/>
This is how Table is used in the index page. style.css and index.less are the pages for CSS.
Can anybody help me to write one CSS in this page for making one row green color ?
I want to make one row green based on condition.
I need the CSS
I need to call the CSS in the page where code is

Answer 1

I found two ways to do this as of now:
One way is to use rowClassName prop of Table:
.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}
/>
Second way is to use plain 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}
/>
Note that rowClassName works only for rows, so for CSS on table headers we can only use plain CSS like above.

Answer 2

See if these Jsfiddle links helps you. They show 2 ways to change backgroung-color your rows.
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'}
]
for first link
render(text, record) {
return {
props: {
style: { background: record.color },
},
children: <div>{text}</div>,
};
},
for second link
rowClassName={(record) => record.color.replace('#', '')}

Answer 3

if you want to use styled-components you can wrap it like this
const StyledTable: React.FC<TableProps<T>> = styled(Table)`
.ant-table-header th {
background-color: green;
}
`
export const Table = () => (
<StyledTable
columns={columns}
dataSource={data}
...
/>