[英]React DataTable fails to change the font-size
I work on a React app and there is a component using DataTable (reference is here ). 我在React应用程序上工作,并且有一个使用DataTable的组件(参考此处 )。
The default font-size looks too small so I want to change to make it look bigger. 默认字体大小太小,因此我想进行更改以使其看起来更大。
I try to set the style to the table as the code below but it doesn't work. 我尝试将样式设置为下表中的代码,但它不起作用。
Here is my code: 这是我的代码:
import React from 'react';
import ReactDOM from 'react-dom';
import DataTable from 'react-data-table-component';
export default class MyTable2 extends React.Component {
constructor(props) {
super(props);
const data = [];
for (var i = 0; i < 200; i++) {
data.push({ id: i, title: 'Conan the Barbarian' + i, summary: 'Orphaned boy Conan is enslaved after his village is destroyed...', year: '1982', expanderDisabled: true, image: 'http://conan.image.png' })
}
this.state = {
rs: data
}
}
render() {
const columns = [
{
name: 'Title',
selector: 'title',
sortable: true,
},
{
name: 'Year',
selector: 'year',
sortable: true
},
];
const handleChange = (state) => {
console.log('Selected Rows: ', state.selectedRows);
};
let styleobj = { "font-size": "25px" } //try to set the font-size here
return (
<DataTable
className="dataTables_wrapper"
title="Arnold Movies"
columns={columns}
data={this.state.rs}
selectableRows // add for checkbox selection
onTableUpdate={handleChange}
pagination
style={styleobj}
/>
)
}
}
Is there anyone here can suggest me a solution? 这里有人可以建议我解决方案吗?
Thank you in advanced. 在此先感谢您。
Hi @humanbean answer is correct, you can fix the inline stile or, if you want, you also can set the style directly in your app.css 您好@humanbean答案是正确的,您可以修复内嵌阶梯,也可以根据需要直接在app.css中设置样式
Based on your custom classname (.dataTables_wrapper) I think that this css should work. 基于您的自定义类名(.dataTables_wrapper),我认为此CSS应该可以工作。
.dataTables_wrapper .rdt_TableCell{
font-size:25px;
}
this is the className used by react-data-table-component 这是react-data-table-component使用的className
rdt_Table
rdt_TableRow
rdt_TableCol
rdt_TableCol_Sortable
rdt_TableCell
rdt_TableHeader
rdt_TableFooter
rdt_TableHead
rdt_TableHeadRow
rdt_TableBody
rdt_ExpanderRow
Can you try this 你可以试试这个吗
// Override the row font size
const myNewTheme= {
rows: {
fontSize: '25px'
}
}
<DataTable
className="dataTables_wrapper"
title="Arnold Movies"
columns={columns}
data={this.state.rs}
selectableRows // add for checkbox selection
onTableUpdate={handleChange}
pagination
customTheme={myNewTheme}
/>
Theme reference Source file 主题参考源文件
If you want to change an individual cell font size, you can do this 如果要更改单个单元格的字体大小,可以执行此操作
const columns = [
{
name: 'Title',
selector: 'title',
sortable: true,
cell: row => <div style={{fontSize: 25}}>{row.title}</div>
}]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.