如何修改Material UI表格内容字号并设置标题左对齐？

表格字号设置不生效问题 #

直接在Table组件上设置fontSize不生效，是因为MUI的TableCell组件本身自带默认字号样式，子元素自身的样式优先级高于从父级继承的样式，所以你在父级Table上写的字号不会被单元格采用。
不用给每个单元格单独套Typography，两种批量处理方案按需选择即可：

• 全项目所有表格统一字号：在MUI主题里全局覆写TableCell的默认样式

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiTableCell: {
      styleOverrides: {
        root: {
          fontSize: 14, // 替换为你需要的字号值
        }
      }
    }
  }
})

// 把应用根组件用ThemeProvider包裹，全局所有表格都会生效
// <ThemeProvider theme={theme}><App /></ThemeProvider>

• 仅修改单个表格的字号：在Table的sx属性里用选择器批量选中内部所有单元格统一样式

<TableContainer style={{width:600,height:170}}> 
  <Table 
    sx={{
      '& .MuiTableCell-root': {
        fontSize: 14, // 替换为你需要的字号值
      }
    }} 
  >
    {/* 原有表格内容无需修改 */}
  </Table>                              
</TableContainer>

Fiscal Year标题左对齐不生效问题 #

float: left不生效是因为Grid组件默认是flex布局，flex容器内的子元素不受float属性控制。文本显示居中是因为包裹标题的Grid没有占满整行宽度，也未设置对齐规则。
直接给Grid添加两个样式即可解决：

<Grid sx={{ width: '100%', textAlign: 'left' }}>
  <Typography variant="body1">Fiscal Year</Typography>
</Grid>

另外你之前写在Table sx属性里的display:""是无效空值，alignItems: "center"是垂直居中规则，不需要的话可以删掉，避免干扰布局。

内容的提问来源于stack exchange，提问作者user460567