CODEWITHSUNDEEP
cssreactjsmaterial-uiformsy-material-ui
user460567
user460567

Reputation: 133

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

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. enter image description here

Any help regarding either matter is appreciated.

Upvotes: 1

Views: 3985

Answers (1)

Prashant Jangam
Prashant Jangam

Reputation: 2828

  1. you dont need Grid for Fiscal Year. Just Typography is enough.
  2. 3rd line <Table... dont mix sx and style. just use sx and all css styles inside it.
  3. 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/
  4. 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.

Upvotes: 0

Related Questions