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

Question

我在 MUI 中使用 CSS 的 makestyles 方法，现在我想要一些 if else 条件用于暗模式和亮模式

const useStyles = makeStyles(主题 => ({

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

您可以检查 theme 对象内部的模式并使用三元：

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

查看文档以了解有关暗 mode/theming 以及如何获取用户偏好的更多信息：

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

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

How To change Font size of element in dark mode in MUI React Framework?

reactjs

material-ui