如何在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来完成此操作，这意味着除非使用某些第三者样式插件，否则您不能像问题中那样使用内联样式。

The AntD default theme提供了断点变量：

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

然后可以在LESS文件中使用这些文件进行标准媒体查询。