How to change font size of mui table in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To change font size of mui table in React js, you can use this css code sx={{ fontSize: 30 }}. It will change font size of mui table.

Today, I am going to show you, how to change font size of mui table in react js.

Table of contents

• Install Material-UI.
• Import the Mui table component.
• Set font size.
• Define the Mui table component.

Let’s start with the first step.

Step 1: Install Material-UI

The first step is to install Material-UI. And you can use npm or yarn. And you can open it by typing in terminal.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

Step 2: Import the Mui table component.

To change font size of mui table in React, first, you have to import the table. We have imported the Table, TableBody, TableCell, TableHead, TableRow components from the @mui/material library.

import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';

Step 3: Set font size.

To change the font size of a Material-UI table, you can use the font size property of the tablecell component.

<TableCell sx={{ fontSize: 30 }}>Column 1</TableCell>
    <TableCell sx={{ fontSize: 30 }}>Column 2</TableCell>
<TableCell sx={{ fontSize: 30 }}>Column 3</TableCell>

Step 3: Define the Mui table component.

We have to define to show the data of our table. we will create an array of employees with their Column 1, Column 2, and Column 3.

<TableHead>
  <TableRow>
    <TableCell sx={{ fontSize: 30 }}>Column 1</TableCell>
    <TableCell sx={{ fontSize: 30 }}>Column 2</TableCell>
    <TableCell sx={{ fontSize: 30 }}>Column 3</TableCell>
  </TableRow>
</TableHead>

MUI material change font size of mui table example.

The below code is an example of a Material UI table. You have to import @mui material table. In the Material Table function when you create a table component, it consists of a table head and a table body. The font size for data cells has been set at 20 and for heading cells at 30.

App.js

import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';

export default function CustomTable() {
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell sx={{ fontSize: 30 }}>Column 1</TableCell>
          <TableCell sx={{ fontSize: 30 }}>Column 2</TableCell>
          <TableCell sx={{ fontSize: 30 }}>Column 3</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell sx={{ fontSize: 20 }}>Row 1, Column 1</TableCell>
          <TableCell sx={{ fontSize: 20 }}>Row 1, Column 2</TableCell>
          <TableCell sx={{ fontSize: 20 }}>Row 1, Column 3</TableCell>
        </TableRow>
        <TableRow >
          <TableCell sx={{ fontSize: 20 }}>Row 2, Column 1</TableCell>
          <TableCell sx={{ fontSize: 20 }}>Row 2, Column 2</TableCell>
          <TableCell sx={{ fontSize: 20 }}>Row 2, Column 3</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

In the above code example, I have used the @mui/material component and changed font size of mui table.

Check the output of the above code example.

Here, we are provided code sandbox links for the above program change font size of mui table. Then you can use whenever you went and do the changes as per your requirements.

Try it Yourself

All the best 👍