Question

我在React中使用Material-UI。有没有一种方法只能在移动视图中添加来自主题提供程序的替代？我正在使用该组件，并且如果要在移动视图中删除该组件的boxShadow，则要删除它。

这是我的代码段：

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

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

以及我的主题

MuiCard: {
  root: {
    boxShadow: 'none'
  }
}

Answer 1

在本文中，他们提供了用于此类情况的模块。 Material-UI Breakpoints withWidht

Answer 2

是的，当然。您可以使用[theme.breakpoints.up("md")]或theme.breakpoints.down("sm")

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

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);

仅在移动视图中应用Material-UI替代

2 个答案: