Javascript 仅在移动视图中应用材质ui替代

我在react中使用了materialui。有没有办法只在移动视图中添加来自主题提供程序的覆盖？我正在使用该组件，如果它在mobile view中，我想删除该组件的boxShadow

这是我的代码片段：

import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';

return (
  <Card>
    <CardContent>
      Sample content here
    </CardContent>
  </Card>
);

当然可以。 您可以使用[theme.breakpoints.upmd]或theme.breakpoints.downsm

在您的情况下，它将是这样的：

import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import {withStyles} from "@material-ui/core";

const styles = theme => ({
   customCard: {
      [theme.breakpoints.down("sm")]: {
            boxShadow: "none",
        },
   }
});

function SomeComponent({classes}) {

return (<Card className={classes.customCard}>
            <CardContent>
              Sample content here
            </CardContent>   
       </Card> );
}

export default withStyles(styles)(SomeComponent);

import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import {withStyles} from "@material-ui/core";

const styles = theme => ({
   customCard: {
      [theme.breakpoints.down("sm")]: {
            boxShadow: "none",
        },
   }
});

function SomeComponent({classes}) {

return (<Card className={classes.customCard}>
            <CardContent>
              Sample content here
            </CardContent>   
       </Card> );
}

export default withStyles(styles)(SomeComponent);