Material-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'
  }
}));