[英]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.