How can I change the fontSize of the contents of a table in Material UI?

Question

I would like to change the fontSize of the contents of a table in Material UI. If I change it using the style={{}} component, it's not getting reflected.

  <Grid ><Typography variant="body1">Fiscal Year </Typography></Grid>
    <TableContainer style={{width:600,height:170}}> 
    <Table 
sx={{alignItems: "center",
display:""}} style={{fontSize:100}} 
    >
    {stats?.['Financial Highlights']?.['Fiscal Year']?<TableBody>
                                 <TableRow hover>
                                     <TableCell align="left"> Fiscal Year Ends</TableCell>
                                     <TableCell align="right">  {stats['Financial Highlights']['Fiscal Year']['Fiscal Year Ends']===null?"N/A":stats['Financial Highlights']['Fiscal Year']['Fiscal Year Ends']}</TableCell>
                                 </TableRow>
                                 <TableRow hover>
                                     <TableCell align="left"> Most Recent Quarter (mrq)</TableCell>
                                     <TableCell align="right">{stats['Financial Highlights']['Fiscal Year']['Most Recent Quarter (mrq)']===null?"N/A":stats['Financial Highlights']['Fiscal Year']['Most Recent Quarter (mrq)']}</TableCell>
                                 </TableRow>
    </TableBody>:"Loading..."}
    </Table>                              
    </TableContainer>

I cant include a Typography tag for every row of my table as there are too many tables.

Also, I am unable to move the text Fiscal Year to the left using the float:'left' property. Instead of having it at the centre I would like it aligned to the left.

Any help regarding either matter is appreciated.

score 0 · Answer 1 · answered Jul 08 '22 at 13:34

you dont need Grid for Fiscal Year. Just Typography is enough.
3rd line <Table... dont mix sx and style. just use sx and all css styles inside it.
if you are using custom theme, then you can customize the style of TableCell component. please check https://mui.com/material-ui/customization/theme-components/
if you are not using custom theme, then you can create custom TableCell component and use it. please check https://mui.com/material-ui/customization/how-to-customize/#2-reusable-component . You can create custom TableCell component on every required page. or create is separate file and import it wherever required.

How can I change the fontSize of the contents of a table in Material UI?

1 Answers1