如何更改详细信息列表中标题单元的字体大小和填充。我正在使用onRenderDetailsHeader
道具来自定义标题渲染。
private renderDetailsHeader = (detailsHeaderProps: IDetailsHeaderProps) => {
return (
<DetailsHeader
{...detailsHeaderProps}
onRenderColumnHeaderTooltip={this.renderCustomHeaderTooltip}
/>
);
}
private renderCustomHeaderTooltip = (tooltipHostProps: ITooltipHostProps) => {
return (
<span
style={{
display: "flex",
fontFamily: "Tahoma",
fontSize: "10px",
justifyContent: "left",
paddingLeft: '0 px'
}}
>
{tooltipHostProps.children}
</span>
);
}
答案 0 :(得分:1)
在IDetailsHeaderProps['columns']
中或简单地在IColumn[]
=> IColumn
中有'headerClassName'键,您可以在其中为每列指定必要的样式。
答案 1 :(得分:1)
设置行样式:
...
const renderRow: IDetailsListProps['onRenderRow'] = props => {
const rowStyles: Partial<IDetailsRowStyles> = {
root: {
borderBottomColor: theme.semanticColors.buttonBorder,
fontSize: theme.fonts.medium.fontSize,
},
cell: { paddingLeft: 0, },
}
if (!props) return null
return <DetailsRow {...props} styles={rowStyles} />
}
return (
<DetailsList
compact
items={items}
columns={columns}
selectionMode={SelectionMode.none}
layoutMode={DetailsListLayoutMode.justified}
constrainMode={ConstrainMode.horizontalConstrained}
onRenderRow={renderRow}
onRenderDetailsHeader={renderHeader}
onRenderItemColumn={renderItemColumn}
setKey="set"
ariaLabelForSelectionColumn="Toggle selection"
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
checkButtonAriaLabel="Row Checkbox"
/>
)
...
答案 2 :(得分:0)
您可以使用 IDetailsColumnStyles 界面设置标题单元格的样式。
示例:
...
const headerStyle: Partial<IDetailsColumnStyles> = {
cellTitle: {
color: theme.palette.orange,
}
}
const columns: IColumn[] = [
{ styles: headerStyle, key: 'name', name: 'Name', fieldName: 'name', minWidth: 100,},
...