[英]How to style (add css) to material-table (React)?
I've been searching for a few days now and can't find anything.我已经搜索了几天,但找不到任何东西。 I'm using material-table in React but can't figure how to add css in headers (columns of the table) and the content [like changing font size, width and making table rows of striped background].
我在 React 中使用材料表,但不知道如何在标题(表格的列)和内容中添加 css [例如更改字体大小、宽度和使表格行具有条纹背景]。
Can anyone tell me how I can do it?谁能告诉我该怎么做?
For reference, here's the current Material table I have and I want to make the rows striped and change the look of headers (column names)作为参考,这是我当前的 Material 表,我想使行条带化并更改标题(列名)的外观
<MaterialTable
title="Title"
columns={this.state.columns}
data={newDataTable}
options={{
selection: true
}}
options={{
search: false,
sorting: true
}}
actions={[
{
icon: () => <Checkbox />,
tooltip: 'checkbox'
},
{
icon: () => <InfoIcon />,
tooltip: 'info',
onClick: (event, item) => {
this.setState({
isOpen: true,
selectedItem: item
});
}
}
]}
/>
</div>
Edit: Also, can't figure out how to change the content of the rows.编辑:另外,无法弄清楚如何更改行的内容。 Like for example I want to add an icon in front of every item corresponding to its data.
例如,我想在与其数据对应的每个项目前面添加一个图标。 Currently, I'm just using a js array to display the static data but I can't edit it.
目前,我只是使用一个 js 数组来显示 static 数据,但我无法编辑它。
Just define the styles within the columns
property:只需在
columns
属性中定义样式:
this.setState({
columns: {[
{
title: 'Name', field: 'name',
cellStyle: {
backgroundColor: '#039be5',
color: '#FFF'
},
headerStyle: {
backgroundColor: '#039be5',
}
},
// Other columns
]}
});
See https://material-table.com/#/docs/features/styling请参阅https://material-table.com/#/docs/features/styling
if you want to add an icon inside your data( rows/cells), you can use built-in render
callback in columns definition like this :如果要在数据(行/单元格)中添加图标,可以在列定义中使用内置
render
回调,如下所示:
const handleTableColumns = (cols) => {
return cols.map((col) => ({
...col,
render: (rowData) => {
return (
<span style = {{display: 'flex'}} >
<KeyboardArrowRightIcon />
{ rowData[col.id]}
</span>
);
};
}))
};
this will insert the icon <KeyboardArrowRightIcon />
in front of every cell of each row, so in materialTable component you have to use handleTableColumns
as columns :这将在每行的每个单元格前面插入图标
<KeyboardArrowRightIcon />
,因此在materialTable组件中,您必须使用handleTableColumns
作为列:
<MaterialTable
style={{ padding: '0 8px' }}
columns={this.handleTableColumns(this.state.columns)}
data={data}
...
...
/>
Options can be passed with a key rowstyle.可以使用键行样式传递选项。 Where you can configure the background colour.
您可以在哪里配置背景颜色。
< MaterialTable title = "Title" columns = { this.state.columns } data = { newDataTable } options = { { selection: true, rowStyle: (row) => { const rowStyling = { fontSize: "14px", fontFamily: "latoregular" }; if (row.sl % 2) { rowStyling.backgroundColor = "#f2f2f2"; } return rowStyling; }, } } options = { { search: false, sorting: true, } } actions = { [{ icon: () => < Checkbox / >, tooltip: "checkbox", }, { icon: () => < InfoIcon / >, tooltip: "info", onClick: (event, item) => { this.setState({ isOpen: true, selectedItem: item, }); }, }, ] } />;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.