How to apply different styles in different screen sizes in 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.