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

Question

I have used material-ui for some of my prev projects and know i want to use antd. In material-ui we can apply different styles for a div in different screen sizes,

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

How we can accomplish that in antd?

Answer 1

AntD uses ordinary CSS or LESS to accomplish this, which means you can't use inline styles as in your question unless you use some 3rd party styling plugin.

The AntD default theme provides the breakpoint variables:

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

These can then be used in LESS files for standard media queries.