Вы имеете в виду такие правила CSS?

html,
body {
  ...
}

да.

Теперь невозможно не импортировать эти правила CSS.

https://github.com/ant-design/ant-design/issues/1966#issuecomment -247946641

Теперь вы должны переопределить эти глобальные стили.

Или вы отбрасываете опцию style babel-plugin-import , импортируете меньше файлов независимо.

<strong i="12">@import</strong> "~antd/lib/style/themes/default.less";
<strong i="13">@import</strong> "~antd/lib/button/style/index.less";

Хотя это ужасный дизайн.

Эта проблема делает эту библиотеку очень сложной для работы. Особенно с глобальными свойствами тела и т. д. Я думаю, что этот вопрос следует прояснить, если вы не планируете это изменить.

@Forestdev @peitalin это известная проблема, но у нас недостаточно времени, чтобы решить эту проблему.

Но мы можем продолжить обсуждение здесь.

Если мы сможем импортировать критические изменения, мы сможем решить эту проблему. Например, переместить стили при сбросе к стилям компонентов:

Переехать:

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
}

К:

.ant-btn,
.ant-btn * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
}

А для обратной совместимости мы можем предоставить отдельную таблицу стилей сброса.

import 'antd/styles/reset.less'

есть какие-нибудь обновления по этому поводу?

Мы можем обсудить, но у нас нет времени применить какое-либо решение (если мы сможем его найти) сейчас.

Я думаю, что это критическая проблема, поскольку не многие люди могут позволить себе импорт глобального CSS и переопределение существующих стилей.

Это действительно раздражает, что помешало мне принять Antd.

Это заблокирует многих разработчиков#

поскольку ant не может совместим с bootstarp, мне пришлось отказаться от использования ant.

как насчет того, чтобы поместить из меньшего файла в независимую библиотеку.

Кстати. я пытаюсь

Связанное обсуждение: https://github.com/palantir/blueprint/issues/244

Привет, ребята, я работаю над [email protected] и пытаюсь найти решение проблемы с глобальными стилями.

Я попробовал решение import 'antd/styles/reset.less' от @benjycui. Оказывается, это было бы переломным изменением и значительно усложнило бы импорт стилей, особенно с помощью babel-plugin-import. Поэтому я решаю пройти его.

Затем я нахожу, что основной смысл этой проблемы заключается в том, что babel-plugin-import превратит код в:

import Button from 'antd/lib/button';
import 'antd/lib/button/style/css';   // It will import reset styles and hard to override it because it was imported lately!!!

Лучший обходной путь для этого — не использовать опцию style babel-plugin-import и импортировать стиль вручную.

<strong i="17">@import</strong> '~antd/dist/antd.css';

// your global styles
body {
 ...
}

Поэтому я отказываюсь от всей идеи reset.less и просто удаляю раздражающие коды сброса, такие как: https://github.com/ant-design/ant-design/blob/afce275d25abe958b32cf15ba1f16c49f4fca900/components/style/core/base. меньше# L33 -L50

Также я добавил лучший типографский код из bootstrap@v4 для разрешения #6162.

Все обновления сейчас находятся в #7682 и скоро будут объединены в antd-3.0.

Просто измените import 'antd/styles/reset.less на import 'antd/styles/typography.less .

Когда пользователи обновляются с [email protected] , import 'antd/styles/typography.less является адаптером, упрощающим миграцию.

Для пользователей, которые не знакомы с antd, import 'antd/styles/typography.less является дополнительной функцией, поэтому им не нужно беспокоиться о конфликтах.

Добавлено antd/style/v2-compatible-reset.less .

+// For 2.x reset compatibility
+//   import 'antd/style/v2-compatible-reset';
+//     or
+//   <strong i="7">@import</strong> '~antd/style/v2-compatible-reset.css';

Может кто-нибудь, пожалуйста, объясните некоторые шаги, чтобы решить эту проблему, так как эта проблема закрыта. Я пытаюсь использовать antd в сценарии содержимого расширения Chrome, и он портит все веб-страницы.

@abhinavzspace вы можете установить antd@next , чтобы получить сборку Alpha 3.0, которая частично решает эту проблему, но не полностью.

Спустя много времени я нашел решение, которое сработало для меня. Может у других работает...

Проблема в том, что каждый компонент импортирует кучу глобальных сбросов и переопределений (включая normalize.css) из style/core/base.less , если эти стили загружаются асинхронно, они переопределяют стили страницы, что все испортит.

Обнаружил, что добавление

import 'antd/lib/style/index.css'
// import 'antd/lib/style'  if you are using LESS

к точке входа моего проекта заставляет webpack упаковывать сбросы перед всеми другими стилями, поэтому, когда загружается асинхронный компонент, он не импортирует/не включает сбросы снова.

должен ли он давать другой index.less для каждого компонента. index.less можно контролировать. а также почти все файлы меньшего размера удаляют директиву @import или просто используют @import (ссылка)

Будет ли это хорошим решением?

тск тск тск. Эта проблема должна быть «Открытой», чтобы все знали, что это известная проблема. Просто бросил и в середине проекта только для этого.

Это настоящий облом. Мне порекомендовали Ant, и он выглядит многообещающе, но такое поведение портит наш существующий дизайн и делает Ant похожим на Bootstrap. 😦

Ant должен относиться к внешнему виду своих собственных компонентов, а не к внешнему виду сайта пользователя.

Эта проблема подразумевает, что Ant 3 устраняет эту проблему. Но я все еще вижу много глобальных стилей. Что должны сделать пользователи, чтобы избежать добавления этих глобальных стилей?

@openjck Я обнаружил, что это, похоже, сбрасывает глобальные стили (я добавил это в свою точку входа React):

import 'antd/lib/style/v2-compatible-reset';

Нашел это похороненным в их журнале изменений

Я нашел эту записку, но она не сработала для меня. Документация довольно скудная. Какие другие импорты, связанные со стилем, вы сделали и в каком порядке?

Что касается стилей Ant, то это все. Я также использую настройку style: true , что может иметь значение.

Какие глобальные изменения стиля вы видите?

Я использую React с webpacker и rails, и раньше у меня была такая же проблема. Чтобы решить эту проблему, в представлении HTML я добавляю тег ссылки на таблицу стилей существующего имени файла CSS под тегом stylesheet_pack_tag, и это работает.
= javascript_pack_tag 'root'
= stylesheet_pack_tag 'root'
= stylesheet_link_tag 'application'

@jhdavids8 , где вы устанавливаете style: true ? Я не уверен, что это применимо к моей установке.

Я использую приложение create-реагировать. Документация рекомендует добавить это в одну из основных таблиц стилей:

<strong i="10">@import</strong> '~antd/dist/antd.css';

... но при этом вводятся глобальные изменения стиля, такие как семейство шрифтов и высота строки, которые устанавливаются в теле.

Я просто использую babel-plugin-import , как описано здесь , для импорта стилей по запросу. Опция style: true — это способ импорта исходных файлов Sass (см. это ), который нам нужен, поскольку мы также сильно настраиваем тему Ant.

Наша команда просто забросила antd из-за глобальных стилей 😭 . Я знаю, что вы заняты, но если бы вы нашли способ решить эту проблему, это радикально увеличило бы охват antd.

Пожалуйста, откройте этот вопрос снова. Я все еще вижу это поведение, как и другие.

+1

+1

Глобальный css, добавленный мной, будет каждый раз упакован в середине /lib/style/index.css, я просто хочу удалить antd
Добавьте правильное отображение в IE 10-.
Назад
HTML,
тело {
ширина: 100%;
высота: 100%;
}
Почему это так сложно... Почему нельзя поместить пользовательский глобальный css в конец /lib/style/index.css

+1

+1

Я обнаружил, что смог решить проблему способом, описанным @afc163 .

Обычно вы делаете import 'antd/lib/tabs/style/css'; , что указывает на файл, содержащий только это:

'use strict';
require('../../style/index.css');
require('./index.css');

Я хотел просто импортировать CSS вкладок, поэтому я добавил это в свой файл компонента:

import 'antd/lib/tabs/style/index.css';

И оказалось, что мой компонент вкладок соответствующим образом оформлен, не затрагивая остальную часть страницы.

Однако будьте осторожны, так как первый стиль существует не просто так - возможно, некоторые компоненты antd зависят от него больше, чем другие, и это может работать не во всех случаях.

_Если вы еще этого не сделали, обязательно удалите свойство style из ваших плагинов .babelrc:
[ "import", { "libraryName": "antd" } ] _

Надеюсь, это поможет кому-то!

Это абсолютное безумие... "Модульная" библиотека компонентов, которая мешает глобальным стилям. Я понятия не имею, почему эта библиотека так высоко ценится из-за того, что она ошибается в таких фундаментальных вещах. Не говоря уже о том, что они закрыли этот тикет, как будто проблема решена.

@strongui babel-plugin-import у вас не работает?

@abenhamdine Нет, это не так. И не я один, судя по комментариям выше.

Используя последнюю версию библиотеки, у меня все еще есть эта проблема.

Кто-нибудь нашел исправление (в идеале не сброс)?

Мне удалось импортировать точный CSS для небольших компонентов, которые мне нужны.

import 'antd/lib/checkbox/style/index.css'

Но теперь я пытаюсь реализовать таблицу. Таблица зависит от многих стилей, поэтому мне пришлось импортировать все различные листы CSS по отдельности, и это нормально. _За исключением_ того, что для функции сортировки мне нужен CSS icon , которого нет в antd/lib/icon . Вместо этого мне пришлось импортировать основную таблицу стилей, так как иконка css просто перенаправляется на нее.

import 'antd/lib/style/index.css'

Это файл, который влияет на остальную часть моего приложения ☝️

По крайней мере, вы можете сделать так, чтобы никакие листы CSS не перенаправляли на основной? (Например, icon , который мне нужен для сортировки таблиц?)

Кроме того, @afc163 , пожалуйста, откройте эту проблему еще раз, она не решена.

Просто прочитайте ветку и увидите тег «НЕ ИСПРАВИТЬ». Это ошибка P0, которая блокирует все крупные приложения и встроенные компоненты, которые выбирают Ant.D в качестве своей библиотеки компонентов. Тег должен быть «РАЗБИВАЮЩЕЕ СЕРДЦЕ».

@afc163 afc163 почему это помечено как не исправимое ?? Суть философии реагирования и модульного дизайна заключается в том, чтобы компоненты НЕ просачивались в другие компоненты. Это не имеет абсолютно никакого смысла. Я потратил некоторое время и извлек css для выбора дерева и смог заставить его работать, не влияя ни на что другое, поэтому я знаю, что это возможно.

+1 за повторное открытие этого вопроса. Мы пытаемся перевести наше приложение с Material-UI на AntD, и это является серьезным препятствием для входа.

+1 за повторное открытие. babel-plugin-import у меня не работает, перепробовал все туты и инструкции. Невозможно изменить глобальный шрифт для моего приложения 😱

В blueprintjs palantir/blueprint#244 была связанная проблема.

Одним из предложений является использование плагина postcss под названием: css-byebye
https://github.com/AoDev/css-byebye

Это может помочь как временное решение.

Отличная библиотека, но ужасное отношение к ее пользователям. Почему шрифты по умолчанию должны быть изменены? И почему нет возможности сбросить шрифты и стили?

Это удерживает нас — и многих других, судя по чтению комментариев — от использования этой библиотеки.

Я не знаю, связано ли это с языковыми/культурными проблемами, но разработчикам этой библиотеки - обратите внимание: какой смысл создавать библиотеку, которую никто не хочет использовать? Почему вы мешаете своим коллегам-разработчикам использовать вашу библиотеку?

Какой смысл создавать библиотеку, которой никто не хочет пользоваться? Почему вы мешаете своим коллегам-разработчикам использовать вашу библиотеку?

Пожалуйста, соблюдайте умеренность.
Многие разработчики и стартапы используют или хотят использовать эту библиотеку.

Эта библиотека с открытым исходным кодом и бесплатна. Если вы не хотите использовать его, не используйте его.
Если вы хотите изменить его, вы можете разветвить его для собственного использования или отправить PR, разработчики ant-design открыты для предложений.

Так что не надо тут ругаться.

Эта проблема также является нарушителем условий сделки для моей команды.
Нам нравится проект и вся проделанная работа, но эта единственная проблема мешает нам его использовать.

Вот почему я все еще слежу за этой проблемой в надежде, что в ближайшем будущем она снова будет исправлена.

О, я очень умеренный. И я не ругаюсь здесь.

Довожу до вашего сведения, что ваша библиотека, хоть она и великолепна, не должна иметь ненужных побочных эффектов. Представьте, если я использую MomentJS (например), и он начинает отображать дату и время на клингонском языке!

"Иди вилка себе" тоже не ответ. На самом деле это печальное и жалкое состояние многих проектов с открытым исходным кодом.

Мы сами строим сложные системы - мы здесь не новички. Мы хотим пользоваться библиотекой и жить дальше. По крайней мере, должен быть способ попросить библиотеку не изменять шрифт или размер шрифта по умолчанию. Это все, о чем я и, возможно, другие здесь спрашивают.

Вы можете быть глухими и игнорировать эти опасения, концентрируясь вместо того, чтобы выбирать мои слова, ИЛИ вы можете понять, что люди здесь говорят, и предоставить им возможность использовать вашу библиотеку без каких-либо побочных эффектов.

Да прибудет с вами сила, пока вы живете долго и процветаете.

Не могу не согласиться с @kotpal . Что меня поражает, так это обсуждение не о том, "можете ли вы добавить эту функцию" или "было бы неплохо, если бы...", оно буквально пытается убедить автора, что компонент не должен возиться с глобальным государство. Это буквально основная концепция ReactJS и любого модульного дизайна.

Вы НЕ связываетесь с ГЛОБАЛЬНЫМИ чем-либо, если только вы не предоставляете глобальную тему или что-то в этом роде.

Я понимаю, что говорит @abenhamdine . Но я также согласен с @strongui .

Может быть, Муравей должен быть целым опытом. Но на практике многим людям по-прежнему приходится работать с унаследованным кодом, который они просто не могут изменить. И если этот проект конфликтует с этим старым кодом, мы в первую очередь теряем все преимущества использования React (или любого другого подобного фреймворка).

Если эта проблема мешает стольким людям полностью принять проект, может быть, мы можем объединиться и назначить за него награду или что-то в этом роде?

Я знаю, что у меня нет ни знаний, ни времени, чтобы решить эту проблему самостоятельно, так что же нужно для того, чтобы ее исправили участники? (и да, это проблема, а не функция)

Мне удалось переопределить глобальный css, предоставленный antd, и использовать такие проекты, как стилизованный jsx.
Вы можете увидеть развернутый сайт здесь! P.S. Работа в процессе.

Я только что оказался в той же ситуации и добился умеренного успеха, используя тот же подход, описанный @inverts и @corinnebrady (https://github.com/ant-design/ant-design/issues/4331#issuecomment). -361421192 и https://github.com/ant-design/ant-design/issues/4331#issuecomment-365481037). Итак, некоторые из моих компонентов выглядят так:

// ...
import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/index.css'

import AutoComplete from 'antd/lib/auto-complete'
import 'antd/lib/auto-complete/style/index.css'

import Form from 'antd/lib/form'
import 'antd/lib/form/style/index.css'
import 'antd/lib/select/style/index.css'

import Button from 'antd/lib/button'
import 'antd/lib/button/style/index.css'
// ... etc

Это нормально работает с большинством компонентов antd, но есть и другие, с которыми не связан конкретный файл css, и его стили можно найти только в глобальном. Это относится к компоненту icon , чтобы заставить его работать, мне пришлось вручную скопировать все стили, связанные со значками, из глобального файла в мою собственную таблицу стилей. Сопровождающие: примете ли вы PR для включения antd/lib/icon/style/index.css ?

Похоже, вы также можете включить отдельные файлы less, например, import 'antd/lib/spin/style/index.less'

Есть ли планы решить этот вопрос официально?

Все еще проблема, но я пытаюсь исправить ссылочный импорт, как объясняет @reyronald .

Я тоже застрял с проблемой стиля Icon .

@reyronald , можешь сделать пиар, пожалуйста?

Люди, которые страдают от этого, могут попробовать мой форк, добавив пакет прямо из репозитория.

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

или

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

Я исключил только base.less и построил его без каких-либо других модификаций. В моем случае это работает, я не использую многие компоненты из него. Это, вероятно, испортит внешний вид некоторых компонентов, особенно если в вашем проекте еще нет нормальной таблицы стилей сброса. №4546

Привет @afc163 Я также хотел бы присоединиться к вам и добавить дополнительный голос для решения этой проблемы. Мы создаем большое приложение с множеством целей, и некоторые из наших целей загружаются на сторонние сайты. antd вмешательство в глобальный CSS проблематично для нас, потому что в конечном итоге мы сбрасываем настройки CSS и шрифты для этих сторонних сайтов. Нам нравится библиотека, и мы хотели бы внести свой вклад в исправление, если сопровождающие захотят указать нам направление. Пожалуйста, откройте заново или направьте разговор на другую открытую проблему! Спасибо

Таким образом, мы смогли заставить это работать (по крайней мере, пока), используя некоторые манипуляции с веб-пакетом для загрузки альтернативного меньшего файла:

new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/styles.less') ),

Где файл src/style.less загружает те же файлы, что и файл index.less , но загружает их в рамках селектора верхнего уровня:

#root { <strong i="11">@import</strong> '~antd/lib/style/core/index.less'; <strong i="12">@import</strong> '~antd/lib/style/themes/default.less'; }

В результате все «глобальные» стили применяются с областью видимости #root :

`#корневая статья,

корень в сторону,

корневой диалог,

корень figcaption,

коренная фигура,

корневой колонтитул,

корневой заголовок,

корневая группа,

корень основной,

корень навигации,

корневой раздел {

дисплей: блок;
}
`
и т.д...

Надеюсь, это будет полезно для кого-то.

Люди, это действительно раздражает. Такого стиля поведения вы не ожидаете от библиотеки пользовательского интерфейса мирового класса.

Хотя бы упомяните про глобальный сброс в документах, чтобы люди не путались. Или, возможно, будет полезно какое-нибудь руководство «Интеграция в старый веб-сайт» с рецептом импорта отдельных стилей и иконок.

Я думаю, что сопровождающие отписались от этой проблемы после того, как она была закрыта, потому что с тех пор они не участвовали в обсуждении, поэтому мы, вероятно, не получим никакой официальной поддержки по этому вопросу, если не откроем новую проблему, не пропингуем их напрямую или не начнем PR.

Наконец -то я нашел способ обойти эту проблему, создав новый файл CSS на основе оригинального antd.css, в котором каждое правило имеет префикс пользовательского класса. В моем решении используется плагин PostCSS, Gulp и postcss-prefixwrap :

https://gist.github.com/sbusch/a90eafaf5a5b61c6d6172da6ff76ddaa

Он далек от совершенства, но работает на удивление хорошо. По крайней мере, для моих нужд ;-)

Суть также содержит готовую версию antd CSS с префиксом .antd-ns ("ns" как сокращение от "namespace").

Примечания:
Важным требованием для меня было то, что это автоматизировано, поэтому CSS с префиксом можно легко создавать для каждого нового выпуска ant.

• он предназначен только как инструмент для создания префикса CSS; поэтому он может запускаться из другой папки, отделенной от вашего проекта. Нет необходимости, чтобы ваш проект на основе antd включал PostCSS или Gulp! Полученный CSS просто нужно поместить в статическую папку CSS вашего проекта (что делает Gulp, если он настроен соответствующим образом).
• Версия postcss-prefixwrap должна быть не ниже 1.3.0, включая мой патч для сохранения анимации ключевых кадров antd

Комментарии / отзывы всегда приветствуются!

Спасибо @dbtedman за то, что он сделал это возможным с его прекрасным плагином PostCSS postcss-prefixwrap .

Комментарии / отзывы приветствуются!

Наконец, я нашел способ обойти эту проблему, создав новый файл CSS на основе оригинального antd.css, в котором каждое правило имеет префикс пользовательского класса.

Это ИМХО самое прямое решение.
Лично мне в настоящее время это не нужно, но было бы полезно для всех, если бы кто-нибудь отправил PR, чтобы добавить переменную меньшего имени класса (например, .@{scope} ) перед каждым правилом css в меньшем количестве файлов.

По умолчанию эта переменная будет пустой, чтобы не нарушать текущее поведение.

Нужно было бы только установить переменную, например, antd , чтобы изолировать стили.

Я думаю, что это решение было бы приемлемым для сопровождающих и позволило бы двигаться вперед.

Вот обходной путь, который сработал для меня. Я создал файл styles.less

// Doing what antd/lib/style/core/index.less does
// but without loading "base" which overwrites global styles
<strong i="7">@import</strong> '~antd/lib/style/mixins/index.less';
<strong i="8">@import</strong> '~antd/lib/style/core/iconfont.less';
<strong i="9">@import</strong> '~antd/lib/style/core/motion.less';

<strong i="10">@import</strong> '~antd/lib/menu/style/index.less';
<strong i="11">@import</strong> '~antd/lib/dropdown/style/index.less';
<strong i="12">@import</strong> '~antd/lib/button/style/index.less';
<strong i="13">@import</strong> '~antd/lib/checkbox/style/index.less';
<strong i="14">@import</strong> '~antd/lib/grid/style/index.less';

В .babelrc у меня есть:

  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": false,
      }
    ]
  ]

для оптимизации размера сборки JS, как описано в https://ant.design/docs/react/getting-started#Import -on-Demand и https://github.com/ant-design/babel-plugin-import.

Для индивидуального стиля я изменил конфигурацию своего веб-пакета на:

module: {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader'
    }, {
      loader: 'css-loader'
    }, {
      loader: 'less-loader',
      options: {
        javascriptEnabled: true,
        modifyVars: {"primary-color": "#ed1c24"},
      }
    }]
  }]
}

как описано в https://ant.design/docs/react/customize-theme#1)-Using-theme-property-(recommended-way)

Кстати: я пытался использовать new webpack.IgnorePlugin(/style\/core\/base/) , чтобы просто игнорировать этот файл «base.less» при обработке, но я не мог заставить его работать. Я не знаю почему. Моя гипотеза заключается в том, что он обрабатывается с помощью LESS, а не непосредственно с помощью Webpack.

Как бы то ни было, я вручную отредактировал antd.css и смог удалить ненужные стили, не нарушая ни одного компонента antd, который я использую.

@paneq Сейчас я делаю то же самое. Обратите внимание, что параметр стиля babel-plugin-import также может быть функцией, которая может решить, следует ли включать стиль. У меня просто не получилось. Придется отлаживать это…
Может я тоже неправильно истолковываю этот вариант?

@paneq Я скопировал то, что вы сделали, и, похоже, до сих пор это работало, но я не пробовал достаточно компонентов, чтобы увидеть, какие из них требуют этого глобального css. Спасибо

@vthinkxie

привет, должна быть возможность попробовать сопоставить все элементы, начиная с .ant, и назначить им стили

*[класс^='муравей-']{
box-sizing: граница-коробка;
-webkit-tap-highlight-color: rgba (0, 0, 0, 0); // удалить цвет подсветки тапа для мобильного сафари
}

Он должен иметь кроссбраузерную совместимость и не должен занимать много времени на реализацию.

Таким образом, мы смогли заставить это работать (по крайней мере, пока), используя некоторые манипуляции с веб-пакетом для загрузки альтернативного меньшего файла:

new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/styles.less') ),

Где файл src/style.less загружает те же файлы, что и файл index.less , но загружает их в рамках селектора верхнего уровня:

#root { <strong i="12">@import</strong> '~antd/lib/style/core/index.less'; <strong i="13">@import</strong> '~antd/lib/style/themes/default.less'; }

В результате все «глобальные» стили применяются с областью видимости #root :

Какую версию less-loader вы используете? Кажется, это работает только с 3.0.0? Видеть. например https://github.com/webpack-contrib/less-loader/issues/184

Кроме того, какую версию antd вы использовали для этого обходного пути? Причина, по которой я спрашиваю, заключается в том, что у меня не было успеха даже с [email protected] и [email protected] (у веб-пакета были проблемы с разрешением после изменения). ..

Я не знаю, поможет ли это кому-нибудь, но следующее помогло мне импортировать CSS только для используемого компонента:

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

Я не знаю, поможет ли это кому-нибудь, но следующее помогло мне импортировать CSS только для используемого компонента:

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

Да, это, кажется, работает нормально для многих компонентов. Однако ваш пробег может отличаться - по крайней мере, Select требует немного больше, чем просто собственные стили компонента. В противном случае значок «удалить» в выборе не будет отображаться; У меня не было времени полностью отследить проблему, но я, вероятно, что-то незначительное. Таким образом, вам может понадобиться имитировать некоторые стили из основных стилей в некоторых компонентах.

Хотя этот вариант не совсем совершенен, он может хорошо работать для многих компонентов. Пользовательские стили могут сломаться при обновлениях, но вы, очевидно, можете контролировать, когда хотите делать свои обновления.

Лучшим решением, которое я нашел для нашей организации, является включение всего листа CSS из antd с удалением любых стилей, влияющих на именованные стили, не относящиеся к antd. Пробег может варьироваться, и, очевидно, есть обратная сторона того, что сейчас импортируется _все_ стили. Но это работает хорошо, и я не видел никаких проблем после этого около двух месяцев.

@jaleikas
Вы нашли обходной путь для этого? Насколько я могу судить, проблема с [email protected] все еще не решена, и поэтому предлагаемое исправление с помощью NormalModuleReplacementPlugin не работает. Это решение на самом деле кажется лучшим, поскольку все можно вручную переопределить и ограничить.
Я пробовал то же самое, что и вы, понижая версию less-loader, но тогда разрешение веб-пакета не работает.

Здесь используется [email protected] .

Люди, страдающие от этого, могут попробовать мой форк, добавив пакет прямо из репозитория.

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

или

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

Я просто отказался от базы и построил ее без каких-либо других модификаций. В моем случае это работает, я не использую многие его компоненты. Вероятно, на него повлияют некоторые компоненты, особенно если в вашем проекте еще нет разумной таблицы стилей сброса. №4546

это работает для меня

Люди, которые страдают от этого, могут попробовать мой форк, добавив пакет прямо из репозитория.

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

или

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

Я исключил только base.less и построил его без каких-либо других модификаций. В моем случае это работает, я не использую многие компоненты из него. Это, вероятно, испортит внешний вид некоторых компонентов, особенно если в вашем проекте еще нет нормальной таблицы стилей сброса. №4546

Спасибо за это решение!

Вы нашли обходной путь для этого? Насколько я могу судить, проблема с [email protected] все еще не решена, и поэтому предлагаемое исправление с помощью NormalModuleReplacementPlugin не работает. Это решение на самом деле кажется лучшим, поскольку все можно вручную переопределить и ограничить.

Я отказался от использования antd и решил выбрать некоторые нестилизованные компоненты (например, rc-switch). Проблема в том, что большинство «нестилизованных» компонентов либо ужасно/не задокументированы, и некоторые из них, кажется, ведут себя по-другому, поэтому по большей части я сдался и поискал в другом месте...

привет, должна быть возможность попробовать сопоставить все элементы, начиная с .ant, и назначить им стили

*[класс^='муравей-']{
box-sizing: граница-коробка;
-webkit-tap-highlight-color: rgba (0, 0, 0, 0); // удалить цвет подсветки тапа для мобильного сафари
}

Он должен иметь кроссбраузерную совместимость и не должен занимать много времени на реализацию.

@tylik1 , спасибо! мне просто нужно было исправить семейство шрифтов, чтобы оно соответствовало остальной части моего электронного приложения. это полностью спасло меня.

Я не знаю, поможет ли это кому-нибудь, но следующее помогло мне импортировать CSS только для используемого компонента:

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

это работает для меня следующим образом.

import Icon from 'antd/lib/icon';
import 'antd/lib/icon/style/index.css';

К сожалению, это шоу стопор. Я также не буду реализовывать Antd, хотя средство выбора даты — лучшее, что я смог найти.

В настоящее время мы ищем библиотеку компонентов реагирования для нашей компании, и это также проблема блокировки для нас, и мы, вероятно, не используем ant из-за этого.

Мы также смотрим на React MUI, у которого есть отличные возможности оформления тем, возможно, вы сможете взглянуть на то, как они это делают, и реализовать что-то подобное.

Я использовал https://www.npmjs.com/package/patch-package , чтобы прокомментировать

// import 'normalize.css/normalize.css';

от antd-mobile/es/style/index.js .
Моя цель состояла в том, чтобы получить next.js для сборки, поэтому в моем случае я просто включил ссылку CND в свой заголовок.

Шел 2020 год, человечество вымерло, коронавирус, муравьиный дизайн добавляет в проект глобальные стили...

Отслеживание в #9363