如何在antd react中将不同的样式应用于不同的屏幕尺寸？

Question

我已经在一些上一个项目中使用了material-ui，并且知道我想使用antd。 在material-ui中，我们可以在不同的屏幕尺寸下为div应用不同的样式，

const styles = theme => ({
    main: {
        [theme.breakpoints.only('md')]: {
            height: '360px',
        },
        [theme.breakpoints.only('sm')]: {
            height: '280px',
        }
    }
});

我们如何在antd中实现这一目标？

Answer 1

AntD使用普通的CSS或LESS来完成此操作，这意味着除非使用某些第三方样式插件，否则您不能像问题中那样使用内联样式。

AntD默认主题提供断点变量：

@screen-xs              : 480px;
@screen-sm              : 576px;
@screen-md              : 768px;
@screen-lg              : 992px;
@screen-xl              : 1200px;
@screen-xxl             : 1600px;

然后，可以在LESS文件中将它们用于标准媒体查询。