PrimeReact currentPageReportTemplate styling

Question

如何从以下组件向属性currentPageReportTemplate添加样式：

public render(): React.ReactElement<IMonitoringProps> {
const template = {
layout: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport',
CurrentPageReport: `${this.props.strings.TotalRecords} {totalRecords}`
// 'CurrentPageReport': <span style=
//             {{fontFamily: 'Rubik, sans-serif',
//               fontSize: '12px',
//               fontWeight: 'normal',
//               letterSpacing: '0px',
//               color: '#667891'}}>
//           {this.props.strings.TotalRecords} {this.state.totalCount}
//         </span>
};

const tableColumns = this.getTableColumns();
return (
<div id="monitoring-page">
<StyledFuncRow className="additional-func-row" data-test="func-row">
<MonitoringFilters
strings={this.props.strings}
typeOptions={this.getTypeColumnOptions()}
onRangeSelected={this.filterData}
/>
</StyledFuncRow>
<StyledMonitoringTable
dataKey="id"
tableClassName="monitoring-table"
value={this.state.records}
paginator={true}
rows={this.tableRowsCount}
first={this.state.first}
lazy={true}
expandedRows={this.state.expandedRows}
rowExpansionTemplate={(data) => this.nestedTableTemplate(data)}
totalRecords={this.state.totalCount}
emptyMessage={this.props.strings.NoRecordsFound}
onRowToggle={(e) => this.rowToggled(e.data)}
onPage={this.onPageChanged}
rowsPerPageOptions={[20, 50, 100]}
pageLinkSize={11}
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport"
currentPageReportTemplate={`${this.props.strings.TotalRecords} {totalRecords}`}>
{tableColumns}
</StyledMonitoringTable>
</div>
);
}

正如你所看到的，我使用了一个模板，但它不起作用。如何将template对象中的注释样式添加到currentPageReportTemplate？

Answer 1

你做得不对。请参阅展示示例：https://www.primefaces.org/primereact/datatable/paginator/

const template1 = {
layout: 'PrevPageLink PageLinks NextPageLink RowsPerPageDropdown CurrentPageReport',
'PrevPageLink': (options) => {
return (
<button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
<span className="p-p-3">Previous</span>
<Ripple />
</button>
)
},
'NextPageLink': (options) => {
return (
<button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
<span className="p-p-3">Next</span>
<Ripple />
</button>
)
},
'PageLinks': (options) => {
if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
const className = classNames(options.className, { 'p-disabled': true });
return <span className={className} style={{ userSelect: 'none' }}>...</span>;
}
return (
<button type="button" className={options.className} onClick={options.onClick}>
{options.page + 1}
<Ripple />
</button>
)
},
'RowsPerPageDropdown': (options) => {
const dropdownOptions = [
{ label: 10, value: 10 },
{ label: 20, value: 20 },
{ label: 50, value: 50 },
{ label: 'All', value: options.totalRecords }
];
return <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} />;
},
'CurrentPageReport': (options) => {
return (
<span className="p-mx-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
Go to <InputText size="2" className="p-ml-1" value={this.state.currentPage} tooltip={this.state.pageInputTooltip}
onKeyDown={(e) => this.onPageInputKeyDown(e, options)} onChange={this.onPageInputChange}/>
</span>
)
}
};