我有一个自定义材料 ui 主题,我尝试在本示例 h5 中的版式中添加断点,以便当屏幕低于定义的最大宽度时字体大小较小。媒体查询甚至没有显示在检查器中。由于某种原因它没有被应用。这是代码的相关部分。
const breakpoints = {
values: {
xs: 0,
sm: 0, // Phone
md: 768, // Tablet/Laptop
lg: 1500, // Desktop
xl: 2000
}
}
function myTheme (theme) {
const mergedTheme = createMuiTheme({
...theme,
breakpoints: breakpoints,
typography: {
...theme.typography,
fontFamily: openSans,
fontSize: 15,
h5: {
fontFamily: openSans,
fontSize: '1.5625rem', // 25px
[`& @media screen (max-width: ${breakpoints.values.lg}px)`]: {
fontSize: '0.06785', //11px
}
}
}
// I have also tried just returning
// the mergedTheme and not used …Run Code Online (Sandbox Code Playgroud)