如何在 MUI React Framework 中更改暗模式下元素的字体大小？

Question

i am using makestyles method for CSS in MUI now i want some if else condition for dark and light mode

const useStyles = makeStyles(theme => ({

titleNew: {
    color: theme.palette.text.primary,
    marginBottom: '8px',
    fontSize:"14px"
    // if  mode is light then font size 14px if modeis dark then fontsize 18px
    
},

subtitleNew: {
    marginBottom: '25px',
    color: theme.palette.text.primary,
},

}));

Answer 1

You can check the mode inside of the theme object and use a ternary:

fontSize: theme.palette.mode === 'light' ? '14px' : '18px'

Check out the docs for more information on dark mode/theming and how to get the user's preference:

https://mui.com/material-ui/customization/dark-mode/#dark-mode-by-default