React/MUI主题对不同组件生效不一致问题求助

问题1：Box组件未应用主题字体样式 #

MUI的Box是基础容器组件，默认仅渲染为普通<div>，不会自动继承主题中的typography配置。你设置的typography.fontSize和fontWeight是全局基准样式，但需要组件主动调用才会生效。

解决办法 #

有两种常用方式：

• 用Typography组件代替Box：Typography是专门处理文本的组件，会自动应用主题的typography样式：

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

const myTheme = createTheme({
  typography: {
    fontSize: 30,
    fontWeight: 500
  }
})

export default function App() {
  return (
    <>
      <div>
        This has no theme and should use the default size and weight for the font.
      </div>
      <ThemeProvider theme={myTheme}>
        <Typography>
          This now reflects the theme's font size and weight.
        </Typography>
      </ThemeProvider>
    </>
  )
}

• 给Box手动应用主题样式：通过sx属性引用主题的typography配置：

<Box sx={(theme) => ({ ...theme.typography.body1 })}>
  This box also uses the theme's font styles.
</Box>

问题2：Table组件仅生效fontSize，fontWeight不生效 #

TableCell默认使用主题的typography.body1变体样式，而你直接在typography根节点设置的fontWeight优先级低于body1自带的默认fontWeight（默认400），所以只有fontSize继承了全局配置，fontWeight被组件自身样式覆盖。

解决办法 #

• 修改主题的body1变体：直接在typography中指定body1的样式，这样所有使用该变体的组件都会生效：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableRow from '@mui/material/TableRow'
import TableCell from '@mui/material/TableCell'

const myTheme = createTheme({
  typography: {
    body1: {
      fontSize: 30,
      fontWeight: 800
    }
  }
})

export default function App() {
  return (
    <>
      <Table>
        <TableBody>
          <TableRow>
            <TableCell>
              This table uses the default size and weight for the font.
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
      <ThemeProvider theme={myTheme}>
        <Table>
          <TableBody>
            <TableRow>
              <TableCell>
                This table now uses both the theme's font size and weight.
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </ThemeProvider>
    </>
  )
}

• 全局重写TableCell样式：如果需要单独给TableCell设置样式（不影响其他用body1的组件），可以用主题的components配置：

const myTheme = createTheme({
  components: {
    MuiTableCell: {
      styleOverrides: {
        root: {
          fontSize: 30,
          fontWeight: 800
        }
      }
    }
  }
})

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