Как применить разные стили на разных размерах экрана в antd реагировать?

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 для стандартных медиазапросов.