How can I change the font size

gbritosuady

Description of problem: I'm new to DataTables. I'm using react, when the table displays the labels: entries per page, Search and Showing 1 to 3 of 3 entries are so big, how can I reduce the font-size of those labels. I tried to place the following sections in my css file, but not working...

.dataTables_filter label {
font-size: 12px;
}

.TBLContainer .dataTables_filter input {
font-size: 12px;
padding: 5px;
border-radius: 5px;
}

Also I imported in the beginning of the file: @import url('datatables.net-dt');

My html code is as follows inside the component:
return (
<>
<div className="TBLContainer">
<DataTable data={IDCRCData} columns={colDef} className="display">
<thead>
<tr>
<th>ID</th>
<th>Currency Name</th>
<th>Sales Rate</th>
<th>Buy Rate</th>
<th>Created By</th>
<th>Date CR</th>
<th>Time CR</th>
</tr>
</thead>
</DataTable>
</div>
</>
);
}

kthorngren

Possibly you are using the wrong selectors. See CSS tab of this example:
https://live.datatables.net/mirasixu/1/edit

You can right click on the element to derive the correct selector to use. If this doesn't help please place a test case on Stackblitz to show an example of your page and what you are trying to use to modify the styling.

Kevin

gbritosuady

Thanks @kthorngren, that approach will be useful if I were using JavaScript or Java. I am using React (vite).

This are my imports:

import React, { useEffect, useState } from "react";
import DataTable from "datatables.net-react";
import DT from "datatables.net-dt";
import axios from "axios";

DataTable.use(DT);

And I this is my return section in the component:

return (
<>
<div className="TBLContainer">
<DataTable data={IDCRCData} columns={colDef} className="display">
<thead>
<tr>
<th>ID</th>
<th>Currency Name</th>
<th>Sales Rate</th>
<th>Buy Rate</th>
<th>Created By</th>
<th>Date CR</th>
<th>Time CR</th>
</tr>
</thead>
</DataTable>
</div>
</>
);

I just follow the example in the website...

Thanks

gbritosuady

I found the problem, I was setting the font size in another component that is a parent of the last one...

Thanks again...

Best regards...