Question 173293 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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.

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    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?


  2. 0

    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

    Login or Signup to reply.
  3. 0

    The styles you have specified in theme apply for Typography component

    Here’s an example how to use it:

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

const myTheme = createTheme({
  typography: {
    fontSize:   20,
    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>
          <Typography>
            This box should reflect the theme but doesn't.  The font is the same size and weight as the previous box.
           </Typography>
        </Box>
      </ThemeProvider>
    </>
  )
}

    Look at the difference in HTML output:
    html output

    If you want to apply global styles, then checkout <GlobalStyles /> https://mui.com/material-ui/api/global-styles/

    Login or Signup to reply.
  4. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search