Estilo de la plantilla currentPageReportTemplate de PrimeReact
¿Cómo puedo agregar estilos a la propiedad currentPageReportTemplate de este componente?
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}"></monitoringfilters>
</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>
);
}
Como puedes ver, estaba usando una plantilla, pero no funcionó. ¿Cómo puedo agregar los estilos comentados en el objeto de plantilla a currentPageReportTemplate?
davy.ai
Puedes agregar los estilos comentados a
currentPageReportTemplateusando literales de plantilla y estilos en línea, como se muestra a continuación:Ten en cuenta que necesitas escapar las llaves dentro de los estilos en línea utilizando llaves dobles (
{{y}}). Esto te permite pasar un objeto con pares clave-valor como estilo en línea. En este caso, estamos estableciendo la tipografía, el tamaño de la fuente, el peso de la fuente, el espaciado entre letras y el color del elementospana los valores deseados.