[英]Changing the style of "Actions" in material-table react
我一直在我的一个项目中使用材料表。
虽然我可以更改用户定义列的样式(字体大小、颜色),但我无法对“操作”列执行此操作。
我对改变字体大小特别感兴趣。
与分页相同的问题:我需要更改其字体大小,但似乎没有可用的选项。
请举一个例子:
https://material-ui.com/components/tables/#complementary-projects
const useStyles = makeStyles({
root: {
backgroundColor: "blue",
color: "green"
},
toolbar: {
backgroundColor: "white"
},
caption: {
color: "red",
fontSize: "20px"
},
selectIcon: {
color: "green"
},
select: {
color: "green",
fontSize: "20px"
},
actions: {
color: "blue"
}
});
...
<MaterialTable
.....
components={{
Pagination: props => (
console.log(props),
(
<TablePagination
{props.labelDisplayedRows(row)}</div>}
component="div"
colSpan={props.colSpan}
count={props.count}
rowsPerPage={props.rowsPerPage}
page={props.page}
onChangePage={props.onChangePage}
onChangeRowsPerPage={this.onChangeRowsPerPage}
classes={{
root: classes.root,
toolbar: classes.toolbar,
caption: classes.caption,
selectIcon: classes.selectIcon,
select: classes.select,
actions: classes.actions
}}
/>
)
)
}}
对于“操作”列,我使用了actions
属性
actions={[
{
icon: "save",
iconProps: { style: { fontSize: "14px", color: "green" } },
tooltip: "Save User",
onClick: (event, rowData) => alert("You saved " + rowData.name)
}
]}
看看这个代码和盒子,会有所帮助。
如果您想坚持用户定义的主题,请使用material-ui 的图标 api 中的道具。
actions={[
{
icon: "save",
iconProps: { fontSize: "small", color: "primary" },
tooltip: "Save User",
onClick: (event, rowData) => alert("You saved " + rowData.name)
}
]}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.