React/MUI theme is not working consistently for different components

I'm using React/MUI for the first time and am unable to make themes work consistently. Here's a simple example of something that doesn't work for me, a Box:

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

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

export default function App() {
  return (
    <>
      <Box>
        This has no theme and should use the default size and weight for the font.
      </Box>
      <ThemeProvider theme={myTheme}>
        <Box>
          This box should reflect the theme but doesn't.  The font is the same size and weight as the previous box.
        </Box>
      </ThemeProvider>
    </>
  )
}

But if I instead use ThemeProvider with a Table then the font size is affected by the theme but the font weight is not:

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: {
    fontSize:   30,
    fontWeight: 800
  }
})

export default function App() {
  return (
    <>
      <Table>
        <TableBody>
          <TableRow>
            <TableCell>
              This table has a single row with a single cell
              and uses the default size and weight for the font.
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
      <ThemeProvider theme={myTheme}>
        <Table>
          <TableBody>
            <TableRow>
              <TableCell>
                This table has a single row with a single cell
                and uses the theme's font size, but not its weight.
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </ThemeProvider>
    </>
  )
}

I'm hopeful someone out there sees what I'm doing wrong.

I'm not expert but I believe that fontWeight style can be applieb by trageting specific varient.
By targeting body1 varient you will able to change font weight as well. like this

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

This will work for sure

I'm posting as an answer instead of a comment because although the instructions say you can include code between backticks, the result wasn't readable.

The page @user16967562 suggested is the one that guided me. This is from that page under "Font size":

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

This doesn't work for <Box> using <ThemeProvider>. The size of the text inside <Box> is unchanged from the default.

Maybe there's some other part of that suggested MUI page I should be paying attention to?

I've continued to experiment and think I have a more complete answer. The solution is that the theme must define fontWeight under body1, and your component has to be included within <Typography> tags, like so:

import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';


const theme = createTheme({
  typography: {
    fontSize: 50,
    body1: {
      fontWeight: 500
    }
  }
});

export default function FontSizeTheme() {
  return (
    <ThemeProvider theme={theme}>
      <Typography>
        <Box>
          Some Text
        </Box>
      </Typography>
    </ThemeProvider>
  );
}

Missing from the MUI documentation is any indication that <Box> is associated with the body1 variant. The word "body1" does not appear on the MUI documentation page for <Box>. The doc page for Typography lists all the variants but doesn't say which variants apply to which components. Why is the body1 variant associated with <Box> and the body2 variant is not? Why can I say this to get <Box> to use body2:

<Typography variant='body2'>
  <Box>
    Some Text
  </Box>
</Typography>

But not this:

<Typography>
  <Box variant='body2'>
    Some Text
  </Box>
</Typography>

What I'm seeking is a system or a pattern or a style of organization within Mui so that when I learn how to do one particular kind of thing, I can then easily figure out how to do a whole bunch of related other kinds of things. So far it just isn't fitting together for me.