Реагировать (далее js) / Ant Design / Less - переопределение точек останова медиазапроса не работает - PullRequest
Новая
       16

Реагировать (далее js) / Ant Design / Less - переопределение точек останова медиазапроса не работает

0 голосов
/ 24 марта 2020

Шаги по воспроизведению: Установите реакцию на следующий js и antd. Добавьте пользовательский файл less для переопределения переменных.

Мой файл .less 

@import '~antd/dist/antd.less';

@border-radius-base: 11px;

@primary-color: #a00;

// Media queries breakpoints
// Extra small screen / phone
@screen-xs: 320px;
@screen-xs-min: @screen-xs;

// Small screen / tablet
@screen-sm: 375px;
@screen-sm-min: @screen-sm;

// Medium screen / desktop
@screen-md: 768px;
@screen-md-min: @screen-md;

// Large screen / wide desktop
@screen-lg: 1024px;
@screen-lg-min: @screen-lg;

// Extra large screen / full hd
@screen-xl: 1440px;
@screen-xl-min: @screen-xl;

// Extra extra large screen / large desktop
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;

Я создал компонент myRow 

import React from 'react';
import { Row, Col } from 'antd';

const style = { background: '#3a3', padding: '8px 0' };

export default () => (
<Row gutter={{
xs: 10, sm: 24, md: 26, lg: 28, xl: 30,
}}

<Col className="gutter-row" span={6}>
  <div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
  <div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
  <div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
  <div style={style}>col-6</div>
</Col>
);

Чем я использовал myRow в index. js

Что ожидается? Я ожидаю, что мои контрольные точки будут работать и применяться ко всем проектам и всем компонентам. В текущем случае - разные желоба для заданных (переопределенных) точек останова. Поэтому на ширину 320px

должен быть наложен водосточный желоб 10 * Что на самом деле происходит? Переопределения не происходит.

ссылка на воспроизведение

...