材质 UI 媒体查询不适用于本机样式

Question

无法使用[props => props.theme.breakpoints.up('sm'(]？

import React from 'react';
import { styled, withTheme } from '@material-ui/core';
export const DefaultContent = withTheme(
styled(({ theme, ...other }) => <main {...other} />)({
flexGrow: 1,
padding: props => props.theme.spacing(1),
backgroundColor: 'red',
[props => props.theme.breakpoints.up('sm')]: {
backgroundColor: 'blue',
},
})
);

Answer 1

使用主题属性时不需要函数 - 看起来您正在混合反引号语法(您会在每行中看到props传入函数(而不是对象语法。这有效：

const DefaultContent = styled('main')(({ theme }) => ({
flexGrow: 1,
padding: theme.spacing(1),
backgroundColor: 'red',
[theme.breakpoints.up('sm')]: {
backgroundColor: 'blue'
}
}));