Material-UI媒体查询在原生styled中不生效，能否使用指定断点写法？

Hey there! Let’s tackle your problem head-on—your current approach using a function as a CSS property key won’t work, but there’s a straightforward fix to get those media queries firing properly.

Why Your Current Code Fails #

Material-UI’s styled components are built on top of styled-components, and the object syntax for styling doesn’t support functions as property keys. When you write [props => props.theme.breakpoints.up('sm')], JavaScript converts that function to the string "[Function]"—which is totally invalid as a media query. That’s why your breakpoint-specific styles never take effect.

The Correct Solution: Template String Syntax #

The template string syntax for styled components does support dynamic, function-based media queries. This is the recommended approach because it lets you leverage Material-UI’s breakpoint utilities directly and cleanly.

Here’s your revised, working code:

import React from 'react';
import { styled } from '@material-ui/core';

export const DefaultContent = styled(({ theme, ...other }) => <main {...other} />)`
  flex-grow: 1;
  padding: ${props => props.theme.spacing(1)};
  background-color: red;

  // This works perfectly!
  ${props => props.theme.breakpoints.up('sm')} {
    background-color: blue;
  }
`;

Quick side note: You don’t need withTheme here—Material-UI’s styled HOC automatically injects the theme into the component props, so wrapping with withTheme is redundant and can be removed.

Alternative: Object Syntax (Not Recommended) #

If you really want to stick with the object syntax, you have to precompute the media query string (since object keys must be static). Here’s how you could do it, though it’s less flexible:

import React from 'react';
import { styled, createTheme } from '@material-ui/core';

// Precompute the breakpoint string using your theme
const theme = createTheme(); // Or use your custom theme instance
const smBreakpoint = theme.breakpoints.up('sm');

export const DefaultContent = styled(({ theme, ...other }) => <main {...other} />)({
  flexGrow: 1,
  padding: props => props.theme.spacing(1),
  backgroundColor: 'red',
  [smBreakpoint]: {
    backgroundColor: 'blue',
  },
});

This works, but it’s not ideal because you can’t dynamically access the theme from within the styling object—you have to define the breakpoint outside the component.

Key Takeaways #

• Always use the template string syntax when working with dynamic media queries in Material-UI styled components.
• Ditch the withTheme wrapper—it’s unnecessary for styled components.
• props => props.theme.breakpoints.up('sm') is a valid way to generate media queries, but only inside the template string, not as an object key.

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