[英]Declare font size for html element for various breakpoints in MaterialUI
I'm working for the first time with materialUI instead of CSS/SASS and I'm having trouble with the CSS reset.我第一次使用 materialUI 而不是 CSS/SASS,我在 CSS 重置时遇到了问题。 What I usually do is that I set the font-size property on the HTML element to 62.5%, so that 1rem = 10px across paddings/margins/font-sizes.
我通常做的是将 HTML 元素上的字体大小属性设置为 62.5%,这样 1rem = 10px 跨填充/边距/字体大小。 Additionally, I define the same thing across my breakpoints, which is what I'm struggling with.
此外,我在我的断点上定义了同样的东西,这是我正在努力解决的问题。
Currently, this is what I have:目前,这就是我所拥有的:
components: {
MuiCssBaseline: {
styleOverrides: {
html: { fontSize: '62.5%' },
},
},
}
This works in general but means that across all devices at the moment 1rem = 10px.这通常有效,但意味着此时 1rem = 10px 在所有设备上。 I want to set the font-size property for phones for example to 50%, so that 1rem = 8px.
例如,我想将手机的字体大小属性设置为 50%,这样 1rem = 8px。 Is there a way to basically write media queries inside the theme so that I can adjust what 1rem means across the different breakpoints?
有没有办法基本上在主题内编写媒体查询,以便我可以调整 1rem 在不同断点上的含义?
You can set properties based on breakpoints in MUI (hope you are using v5+)您可以在 MUI 中根据断点设置属性(希望您使用的是 v5+)
Below Example, child component vanishes when screen size goes beyond xl
and shows when its below xs
下面的示例,当屏幕尺寸超过
xl
时子组件消失,当屏幕尺寸低于xs
时显示
<Paper sx={{ display: { xl: 'none', xs: 'block' } }}>
//child component
</Paper>
In your case,在你的情况下,
<RootElement sx={{ fontSize: { xl: '10px', xs: '8px' } }} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.