Material-UI中的响应式排版？
dwj*_*ton 15 typography responsive-design reactjs material-ui
对于移动设计，设计通常具有较小的标题字体。
Material-UI是否具有使版式响应的机制？
我看到默认主题具有在rems中定义的字体大小-这是否意味着仅减小基本字体大小就可以了？（这似乎不起作用，如果您想以不同的比率减少标题字体怎么办）。
gao*_*way 43
其他答案都没有使用variant预设。
MUI v5 的最佳方式，并使用variant：
<Typography sx={{ typography: { sm: 'body1', xs: 'body2' } }} >
Hello world!
</Typography>
Nea*_*arl 14
MUI v5向所有支持响应式值的MUI 组件添加了sxprop，您可以在其中传递一个对象来定义不同断点处的值：
<Typography
sx={{
fontSize: {
lg: 30,
md: 20,
sm: 15,
xs: 10
}
}}
>
This text is resized on different screen breakpoints
</Typography>
与 类似Box，Typography也支持系统属性，因此您可以跳过sxprop 并fontSize直接传递属性。下面的代码和上面的一样，只是写起来稍微短一些：
<Typography
fontSize={{
lg: 30,
md: 20,
sm: 15,
xs: 10
}}
>
This text is resized on different screen breakpoints
</Typography>
Luk*_*vey 11
没有用于设置响应式字体大小的特定机制。
您可以缩放所有MUI的尺寸Typography改变font-size了的<html>元素，正如你所提到。（docs）
const styles = theme => ({
"@global": {
html: {
[theme.breakpoints.up("sm")]: {
fontSize: 18
}
}
}
}
主题覆盖
据我所知，唯一的其他选择是使用主题替代来定义每个Typography变体的自定义样式。
这需要复制createTypography.js中的某些逻辑（即，设置行高以保持垂直节奏）
const theme = createMuiTheme({
overrides: {
MuiTypography: {
headline: {
fontSize: pxToRem(24),
[breakpoints.up("md")]: {
fontSize: pxToRem(32)
}
}
}
}
- 好答案，谢谢。知道在Material-UI中为什么响应式排版不重要吗？似乎没有任何头脑。 (4认同)
Tim*_*tra 11
更新资料
MUI v4内置了响应式排版！请点击这里了解详情。
旧回应
@luke的答案很好。我想添加一些细节以使它在实践中起作用，因为在主题对象上都可以访问断点和pxToRem ……将其削弱成为鸡和蛋的问题！我的方法：
import { createMuiTheme } from "@material-ui/core"
const defaultTheme = createMuiTheme({ ... customisations that don't rely on theme properties... })
const { breakpoints, typography: { pxToRem } } = defaultTheme
const theme = {
...defaultTheme,
overrides: {
MuiTypography: {
h1: {
fontSize: "5rem",
[breakpoints.down("xs")]: {
fontSize: "3rem"
}
}
}
}
}
export default theme
希望这对某人有用！
如文档中所述，您可以使用responsiveFontSizes()帮助程序使主题中的排版字体大小具有响应性。
import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
let theme = createMuiTheme();
theme = responsiveFontSizes(theme);
我的 v5 方法
import { createTheme } from "@mui/material";
let theme = createTheme({
// ...
});
theme = createTheme(theme, {
typography: {
h1: {
fontSize: 53,
[theme.breakpoints.only("sm")]: {
fontSize: 71,
},
},
},
});
export default theme;
这似乎对我有用 v5
在 App.js 中
...
import {
createTheme,
responsiveFontSizes,
ThemeProvider,
} from '@mui/material/styles';
let theme = createTheme();
theme = responsiveFontSizes(theme);
...
function App() {
return (
<ThemeProvider theme={theme}>
<Router>
.....
</Router>
</ThemeProvider>
);
}
“要自动化此设置，您可以使用responsiveFontSizes()帮助程序使主题中的版式字体大小响应。” https://mui.com/customization/typography/#responsive-font-sizes
| 归档时间： |
|
| 查看次数： |
6770 次 |
| 最近记录： |