In my Material UI table, I am attempting to adjust the fontSize of the contents. However, when I try to modify it using the style={{}} component, the changes are not being applied.
<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>
Due to the number of tables, I can't place a Typography tag for each row in the table.
Additionally, I'm having trouble adjusting the alignment of the text "Fiscal Year" to the left by utilizing the float:'left' property. I would prefer it aligned to the left rather than centered.
https://i.stack.imgur.com/yjYT8.png
Any guidance on these issues would be greatly appreciated.