React应用使用MUI按屏幕尺寸适配样式有什么更优精简写法？

你当前的两套渲染代码DOM结构完全一致，仅存在样式属性的响应式差异，完全不需要通过三元运算符重复渲染两套JSX，直接利用MUI sx 属性内置的断点响应式能力即可精简所有冗余代码，甚至可以移除不必要的useTheme、useMediaQuery调用。

核心原理 #

MUI的sx属性原生支持移动优先的断点配置，所有样式属性都可以通过对象形式，为不同断点单独指定属性值，默认断点匹配规则和你之前用的theme.breakpoints完全一致：

• xs：0px及以上，对应你代码里down('md')命中的移动端场景
• md：900px（默认值）及以上，对应桌面端场景
  属性值会自动根据当前屏幕宽度生效，不需要额外写JS判断逻辑。

优化后代码 #

先梳理你原有代码里的差异点，把仅在不同端生效的样式改成断点配置，公共样式只保留一份：

const MainPage = () => {
    return (
        <div className='mainPage'>
            <Box sx={{
                display: "flex",
                justifyContent: "center",
                alignContent: "center",
                // 响应式排列方向：移动端竖排、桌面端横排
                flexDirection: { xs: "column", md: "row" },
                // 响应式内边距：移动端全边距设置、桌面端仅设置顶部内边距
                p: { xs: "60px 10px 10px 10px", md: 0 },
                pt: { md: 20 }
            }}>
                <Box
                    component="img"
                    src={LandingImage}
                    // 响应式图片宽度：移动端撑满容器、桌面端自适应
                    sx={{ width: { xs: "100%", md: "auto" } }}
                />
                <Box sx={{
                    // 响应式内容区宽度：移动端自适应、桌面端固定700px
                    width: { xs: "auto", md: 700 },
                    paddingTop: 8
                }}>
                    <Typography sx={{
                        // 响应式字号：移动端26px、桌面端30px
                        fontSize: { xs: 26, md: 30 },
                        fontWeight: "bold",
                        fontFamily: "sans-serif",
                        textAlign: "center",
                        paddingBottom: 5
                    }}>About us</Typography>
                </Box>
            </Box>
        </div>
    )
}

补充说明 #

• 如果后续遇到非样式类的断点逻辑（比如移动端渲染特殊交互组件、桌面端渲染其他功能模块），再使用useMediaQuery做分支判断即可，纯样式差异优先用sx断点实现，后续迭代修改DOM结构只需要改一处，不会出现两端逻辑不一致的问题
• 如果项目里有大量重复的响应式样式规则，可以把公共规则抽成独立的样式对象，或者用MUI的styledAPI封装通用组件，进一步减少重复代码

内容的提问来源于stack exchange，提问作者Jake