Você quer dizer regras CSS como esta?

html,
body {
  ...
}

sim.

É impossível não importar essas regras CSS agora.

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

Você precisa substituir esses estilos globais agora.

Ou você descarta a opção style de babel-plugin-import , importa menos arquivos de forma independente.

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

Isso é um design terrível embora.

Este problema torna esta biblioteca muito difícil de trabalhar. Especialmente tendo propriedades globais no corpo, etc. Eu acho que essa questão deve ficar muito mais clara, a menos que você tenha planos de mudar isso.

@Forestdev @peitalin é um problema conhecido, mas não temos tempo suficiente para resolver esse problema.

Mas podemos continuar discutindo aqui.

Se pudermos importar alterações importantes, podemos resolver esse problema. Como, mover estilos em redefinir os estilos dos componentes:

Jogada:

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

Para:

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

E para compatibilidade com versões anteriores, podemos fornecer uma folha de estilo de redefinição independente.

import 'antd/styles/reset.less'

existe alguma atualização sobre isso?

Podemos discutir, mas não temos tempo para aplicar nenhuma solução (se pudermos encontrar) agora.

Eu acho que esta é uma questão crítica, pois muitas pessoas não podem importar um css global e ter seus estilos existentes substituídos

Isso é realmente irritante, o que me impediu de adotar o Antd

Isso bloqueará muitos desenvolvedores#

porque o ant não pode ser compatível com o bootstarp, tive que desistir de usar o ant.

que tal colocar menos arquivo em uma biblioteca independente.

por falar nisso. eu estou tentando

Discussão relacionada: https://github.com/palantir/blueprint/issues/244

Olá pessoal, estou trabalhando no [email protected] e tento encontrar uma solução para o problema de estilos globais.

Eu tentei a solução de import 'antd/styles/reset.less' de @benjycui. Acontece que seria uma mudança de quebra e tornaria a importação de estilos muito mais complicada, especialmente com o babel-plugin-import. Então decido passar.

Então eu acho que o ponto principal deste problema é sobre babel-plugin-import que transformará o código em:

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!!!

A melhor solução para isso é não usar a opção style de babel-plugin-import e importar o estilo manualmente.

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

// your global styles
body {
 ...
}

Então eu desisto de toda a ideia reset.less e apenas removo os códigos de reset irritantes como: https://github.com/ant-design/ant-design/blob/afce275d25abe958b32cf15ba1f16c49f4fca900/components/style/core/base. menos#L33 -L50

Também adicionei um código de tipografia melhor de bootstrap@v4 para resolver #6162

Todas as atualizações estão em #7682 agora e serão mescladas em antd-3.0 em breve.

Basta alterar import 'antd/styles/reset.less para import 'antd/styles/typography.less .

Quando os usuários atualizam de [email protected] , import 'antd/styles/typography.less é um adaptador para facilitar a migração.

Quando os usuários são novos no antd, import 'antd/styles/typography.less é um recurso opcional, então eles não precisam se preocupar com conflitos.

Adicionado 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';

Alguém pode explicar algumas etapas para corrigir esse problema, pois esse problema está encerrado agora. Estou tentando usar o antd no script de conteúdo de uma extensão do Chrome e isso atrapalha todas as páginas da web.

@abhinavzspace você pode instalar antd@next para obter a versão 3.0 Alpha, que resolve esse problema um pouco, mas não totalmente.

Depois de muito tempo, encontrei alguma solução que funcionou para mim. Talvez funcione para os outros...

O problema é que cada componente importa um monte de redefinições e substituições globais (incluindo normalize.css) de style/core/base.less , se esses estilos forem carregados de forma assíncrona, eles substituirão os estilos de página, bagunçando tudo.

Descobriu que adicionar

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

para o ponto de entrada do meu projeto faz com que o webpack empacote os resets antes de todos os outros estilos, então quando um componente assíncrono é carregado, ele não importa/inclui os resets novamente.

ele deve fornecer outro index.less para cada componente. o index.less pode ser controlado. e também quase todo menos arquivo remova a diretiva @import ou apenas use @import (referência)

Será uma boa solução?

tsk tsk tsk. Esse problema deve ser "Aberto" para que todos saibam que esse é um problema conhecido. Apenas abandonei o antd no meio de um projeto apenas para isso.

Esta é uma verdadeira chatice. Ant foi recomendado para mim e parece promissor, mas esse comportamento atrapalha nosso design existente e faz com que Ant pareça Bootstrap. 😦

O Ant deve opinar sobre a aparência de seus próprios componentes, mas não sobre a aparência do site do usuário.

Esse problema implica que o Ant 3 corrige esse problema. Mas ainda estou vendo muitos estilos globais. O que os usuários devem fazer para evitar adicionar esses estilos globais?

@openjck Descobri que isso parece redefinir os estilos globais (adicionei-o ao meu ponto de entrada React):

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

Encontrei enterrado em seu changelog

Encontrei essa nota, mas não funcionou para mim. A documentação é bastante escassa. Que outras importações relacionadas ao estilo você fez e em que ordem?

Quanto aos estilos Ant, é isso. Estou usando a configuração style: true também, o que pode ser importante.

Que tipo de mudanças globais de estilo você está vendo?

Estou usando React com webpacker e rails e tendo o mesmo problema antes. Para resolver isso, na minha visualização HTML, adiciono a tag de link da folha de estilo do nome do arquivo CSS existente sob o stylesheet_pack_tag e isso funciona.
= javascript_pack_tag 'root'
= stylesheet_pack_tag 'root'
= stylesheet_link_tag 'application'

@jhdavids8 , onde você está configurando style: true ? Não tenho certeza se isso se aplica à minha configuração.

Estou usando create-react-app. A documentação recomenda adicionar isso a uma das principais folhas de estilo:

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

...mas isso introduz mudanças globais de estilo, como uma família de fontes e altura de linha que são definidas no corpo.

Estou apenas usando babel-plugin-import conforme documentado aqui para importar estilos sob demanda. A opção style: true é uma forma de importar os arquivos fonte do Sass (veja isto ), que precisamos, pois também personalizamos fortemente o tema Ant

Nosso time acabou de abandonar o antd por causa dos estilos globais 😭 . Eu sei que você está ocupado, mas se você pudesse encontrar uma maneira de resolver isso, aumentaria radicalmente o alcance do antd.

Por favor, reabra este problema. Ainda estou vendo esse comportamento e outros também.

+1

+1

O css global adicionado por mim será empacotado no meio de /lib/style/index.css toda vez, eu só quero remover o antd
Adicione a exibição correta no IE 10-.
Costas
html,
corpo {
largura: 100%;
altura: 100%;
}
Por que é tão difícil... Por que o css global personalizado não pode ser colocado no final de /lib/style/index.css

+1

+1

Descobri que consegui resolver o problema da maneira descrita pelo @afc163 .

Normalmente você faria import 'antd/lib/tabs/style/css'; , que aponta para um arquivo com apenas isso:

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

Eu queria apenas importar o CSS do Tabs, então adicionei isso ao meu arquivo de componente:

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

E parecia estilizar meu componente Tabs adequadamente sem afetar o resto da página.

Tenha cuidado, no entanto, já que o primeiro estilo existe por um motivo - talvez alguns componentes do antd dependam dele mais do que outros e isso pode não funcionar em todos os casos.

_Se você ainda não estiver fazendo isso, certifique-se de remover a propriedade style de seus plugins .babelrc:
[ "import", { "libraryName": "antd" } ] _

Espero que ajude alguém!

Isso é uma loucura... Uma biblioteca de componentes "modular", que interfere nos estilos globais. Eu não tenho ideia de por que essa biblioteca é tão conceituada, pois ela comete uma coisa tão fundamental errada. Sem mencionar que eles fecharam este ticket como se o problema estivesse resolvido.

@strongui babel-plugin-import não funciona para você?

@abenhamdine Não, não. E não estou sozinho a julgar pelos comentários acima.

Usando a versão mais recente da library , ainda estou tendo esse problema.

Alguém encontrou uma correção (idealmente não um reset)?

Eu tive sucesso com a importação do CSS exato para os componentes menores que eu preciso

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

Mas agora estou tentando implementar uma tabela. A tabela depende de muitos estilos, então eu tive que importar todas as várias folhas CSS separadamente, o que é bom. _Exceto_ que para o recurso de classificação eu preciso do icon CSS, que não existe em antd/lib/icon . Em vez disso, tive que importar a folha de estilo principal, pois o ícone css apenas redireciona para ela.

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

Este é o arquivo que afeta o resto do meu aplicativo ☝️

No mínimo, você pode fazer com que nenhuma folha CSS redirecione para a principal? (Como o icon que eu preciso para classificar a tabela?)

Além disso, @afc163 , por favor, reabra este problema, ele não foi resolvido.

Basta ler o tópico e ver a tag "WON'T FIX". Este é um bug P0 que bloqueia todo aplicativo grande, componente embutido que escolhe o Ant.D para se tornar seu componente lib. A tag deve ser 'HEART BREAKING'.

@afc163 por que no mundo isso está marcado como não vai consertar? O núcleo da filosofia de reação e design modular é que os componentes NÃO sangrem em outros componentes. Isto não faz absolutamente nenhum sentido. Eu gastei algum tempo e extraí o css para o tree-select e consegui fazê-lo funcionar sem afetar mais nada, então eu sei que é possível.

+1 para reabrir este problema. Tentar fazer a transição do nosso aplicativo de Material-UI para AntD e isso é uma grande barreira à entrada.

+1 para reabertura. babel-plugin-import não funciona para mim, tentei todos os tutoriais e instruções. Não é possível alterar a fonte global do meu aplicativo 😱

Houve um problema relacionado em blueprintjs palantir/blueprint#244 .

Uma sugestão é usar um plugin postcss chamado: css-byebye
https://github.com/AoDev/css-byebye

Isso pode ajudar como uma solução temporária.

Ótima biblioteca, mas maneira horrível de tratar seus usuários. Por que as fontes padrão devem ser alteradas? E por que não há como redefinir as fontes e o estilo?

Isso está nos impedindo - e muitos outros a julgar pela leitura de comentários - de usar esta biblioteca.

Eu não sei se isso é uma questão de idioma/cultural, mas os desenvolvedores desta biblioteca - tome nota: Qual é o sentido de fazer uma biblioteca que ninguém quer usar? Por que você está dificultando o uso de sua biblioteca por seus colegas desenvolvedores?

Qual é o sentido de fazer uma biblioteca que ninguém quer usar? Por que você está dificultando o uso de sua biblioteca por seus colegas desenvolvedores?

Por favor, mantenha-o moderado.
Muitos desenvolvedores e startups usam ou querem usar essa biblioteca.

Esta biblioteca é de código aberto e gratuita. Se não quiser usar, não use.
Se você quiser modificá-lo, você pode bifurcá-lo para seu próprio uso ou enviar um PR, os mantenedores do ant-design estão abertos a contribuições.

Portanto, não há necessidade de reclamar aqui.

Esse problema também é um fator decisivo para minha equipe.
Adoramos o projeto e todo o trabalho que foi feito, mas esse único problema nos impede de usá-lo.

É por isso que ainda estou acompanhando esse problema na esperança de que seja reaberto e corrigido em um futuro próximo.

Ah, eu sou muito moderado. E eu não estou reclamando aqui.

Estou chamando a sua atenção para o fato de que sua biblioteca - mesmo sendo ótima - não deve ter efeitos colaterais desnecessários. Imagine se eu usar o MomentJS (por exemplo) e ele começar a exibir datas e horários em Klingon!

"Vá bifurcar-se" também não é a resposta. Na verdade, esse é o estado triste e patético de muitos projetos de código aberto.

Nós mesmos estamos construindo sistemas complexos - não somos novatos aqui. Queremos usar uma biblioteca e continuar com nossas vidas. Pelo menos deve haver uma maneira de pedir à biblioteca para não alterar a fonte padrão ou o tamanho da fonte. Isso é tudo que eu - e que outros aqui - estão pedindo.

Você pode optar por ser surdo e ignorar essas preocupações - concentrando-se em vez da escolha das minhas palavras - OU você pode optar por entender o que as pessoas aqui estão dizendo e fornecer uma maneira de usar sua biblioteca sem efeitos colaterais.

Que a força esteja com você enquanto você vive longa e próspera.

Não poderia concordar mais com @kotpal . O que me surpreende que essa discussão não seja sobre "você pode adicionar esse recurso" ou "não seria bom se...", está literalmente tentando convencer um autor de que um componente não deve mexer com o global Estado. É literalmente à queima-roupa o conceito central do ReactJS e qualquer design modular.

Você NÃO mexe com nada GLOBAL, a menos que esteja fornecendo um tema global ou algo assim.

Eu entendo o que @abenhamdine está dizendo. Mas também concordo com @strongui .

Talvez Ant deva ser uma experiência completa. Mas, na prática, muitas pessoas ainda precisam trabalhar com código legado que simplesmente não podem alterá-lo. E se este projeto colidir com aquele código antigo, perdemos todos os benefícios de usar o React (ou qualquer outro framework como ele) em primeiro lugar.

Se esse problema está impedindo tantas pessoas de adotarem totalmente o projeto, talvez possamos nos unir e colocar uma recompensa por ele ou algo assim?

Eu sei que não tenho conhecimento ou tempo para corrigir esse problema sozinho, então o que seria necessário para os colaboradores corrigi-lo? (e sim, é um problema e não um recurso)

Eu tive algum sucesso com a substituição do css global fornecido pelo antd e usando projetos como jsx com estilo.
Você pode ver o site implantado aqui! Ps: seu trabalho em andamento.

Acabei de me encontrar na mesma situação e tenho tido sucesso moderado usando a mesma abordagem descrita por @inverts e @corinnebrady (https://github.com/ant-design/ant-design/issues/4331#issuecomment -361421192 e https://github.com/ant-design/ant-design/issues/4331#issuecomment-365481037). Então, alguns dos meus componentes são assim:

// ...
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

Isso funciona bem com a maioria dos componentes antd, mas existem outros que não possuem um arquivo css específico associado a eles, e seus estilos só podem ser encontrados no global. Este é o caso do componente icon , para fazê-los funcionar eu tive que copiar manualmente todos os estilos relacionados ao ícone do arquivo global para minha própria folha de estilo. Mantenedores: você aceitaria um PR para incluir um antd/lib/icon/style/index.css ?

Parece que você pode incluir menos arquivos individuais também, por exemplo, import 'antd/lib/spin/style/index.less'

Algum plano para resolver este problema oficialmente?

Ainda é um problema, mas estou tentando corrigir com importações referenciadas como @reyronald explica.

Estou preso também com o problema de estilo de Icon .

@reyronald você pode fazer um PR, por favor?

As pessoas que sofrem com isso podem querer experimentar meu fork adicionando o pacote diretamente do repositório

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

ou

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

Eu apenas descartei o base.less e o construí sem nenhuma outra modificação. Funciona no meu caso, não uso muitos componentes dele. Provavelmente irá quebrar a aparência de alguns componentes, especialmente se você ainda não tiver uma folha de estilo de redefinição sã em seu projeto. #4546

Ei , @afc163 , também gostaria de entrar aqui e adicionar voz adicional para corrigir esse problema. Criamos um aplicativo grande com muitos destinos e alguns de nossos destinos são carregados em sites de terceiros. antd interferir no CSS global é problemático para nós porque acabamos eliminando as redefinições e fontes de CSS para esses sites de terceiros. Adoramos a biblioteca e gostaríamos de contribuir para uma correção se os mantenedores estivessem dispostos a nos indicar uma direção. Por favor, reabra ou direcione a conversa para outro problema em aberto! Obrigado

Então, conseguimos fazer isso funcionar (pelo menos até agora) usando alguma manipulação do webpack para carregar um arquivo alternativo menor:

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

Onde o arquivo src/style.less carrega os mesmos arquivos que o arquivo index.less , mas os carrega dentro do escopo de um seletor de nível superior:

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

O resultado é que todos os estilos "globais" estão sendo aplicados com o escopo #root :

`#artigo raiz,

raiz de lado,

diálogo raiz,

legenda de raiz,

figura raiz,

rodapé raiz,

cabeçalho raiz,

raiz hgrupo,

raiz principal,

navegação raiz,

seção raiz {

exibição: bloco;
}
`
etc...

Espero que isso seja útil para alguém.

Gente, é muito chato. Esse comportamento de estilo não é o que você esperaria da biblioteca de interface do usuário de classe mundial.

Pelo menos mencione sobre a redefinição global nos documentos, para que as pessoas não fiquem confusas. Ou provavelmente algum guia "Integrando no site legado" com receita sobre a importação de estilos e ícones individuais será útil

Eu acho que os mantenedores cancelaram a assinatura deste problema depois que ele foi fechado porque eles não participaram da discussão desde então, então provavelmente não receberemos nenhum suporte oficial sobre isso, a menos que abramos um novo problema, faça um ping diretamente ou abra um PR.

Finalmente encontrei uma maneira de contornar esse problema produzindo um novo arquivo CSS baseado no antd.css original, com cada regra prefixada com uma classe personalizada. Minha solução usa o plugin PostCSS, Gulp e postcss-prefixwrap :

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

Está longe de ser perfeito, mas funciona surpreendentemente bem. Pelo menos para as minhas necessidades ;-)

A essência também contém uma versão pronta de antd CSS, prefixado com .antd-ns ("ns" como abreviação de "namespace")

Notas:
Um requisito importante para mim era que ele fosse automatizado, então o CSS prefixado pode ser facilmente produzido para cada novo lançamento do ant.

• destina-se apenas a ser uma ferramenta para criar o CSS prefixado; para que ele possa ser executado em uma pasta diferente separada do seu projeto. Não há necessidade de seu projeto baseado em antd incluir PostCSS ou Gulp! O CSS resultante só precisa ser colocado na pasta CSS estática do seu projeto (o que é feito pelo Gulp se configurado de acordo).
• postcss-prefixwrap deve ser pelo menos a versão 1.3.0, que inclui meu patch para preservar as animações do quadro-chave antd

Comentários / feedback sempre apreciado!

Obrigado a @dbtedman por tornar isso possível com seu bom plugin PostCSS postcss-prefixwrap .

Comentários / feedback apreciado!

Finalmente encontrei uma maneira de contornar esse problema produzindo um novo arquivo CSS baseado no antd.css original, com cada regra prefixada com uma classe personalizada.

Esta é IMHO a solução mais direta.
Pessoalmente, não tenho necessidade disso atualmente, mas seria benéfico para todos se alguém enviasse um PR para adicionar uma variável menos nome de classe (por exemplo .@{scope} ) antes de cada regra css em menos arquivos.

Por padrão, esta variável estaria vazia, para evitar a quebra do comportamento atual.

Bastaria definir a variável com, por exemplo, antd para isolar os estilos.

Acho que essa solução seria aceitável para os mantenedores e permitiria seguir em frente.

Aqui está uma solução alternativa que funcionou para mim. Eu criei o arquivo 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';

Em .babelrc eu tenho:

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

para otimizar o tamanho da compilação JS conforme descrito em https://ant.design/docs/react/getting-started#Import -on-Demand e https://github.com/ant-design/babel-plugin-import

Para um estilo personalizado, alterei minha configuração do webpack para:

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

conforme descrito em https://ant.design/docs/react/customize-theme#1)-Using-theme-property-(recommended-way)

BTW: Eu tentei usar new webpack.IgnorePlugin(/style\/core\/base/) apenas para ignorar este arquivo "base.less" do processamento, mas não consegui fazê-lo funcionar. Eu não sei por quê. Minha hipótese é isso porque é processado com LESS, e não com Webpack diretamente.

Por que vale a pena, eu editei manualmente o antd.css e consegui remover estilos indesejados sem quebrar nenhum componente do antd que eu uso.

@paneq Atualmente estou fazendo o mesmo. Observe que a opção de estilo de babel-plugin-import também pode ser uma função, que pode decidir se um estilo deve ser incluído. Eu simplesmente não consegui fazer funcionar. Teria que depurar isso…
Talvez eu também esteja interpretando mal essa opção?

@paneq Copiei o que você fez e parece ter funcionado até agora, mas não tentei componentes suficientes para ver quais exigem esse css global. Obrigado

@vthinkxie

oi, deve ser possível tentar combinar todos os elementos, começando com .ant, e atribuir estilos a eles

*[class^='ant-']{
dimensionamento de caixa: caixa de borda;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove a cor de destaque do toque para safári móvel
}

Deve ter compatibilidade entre navegadores e não deve demorar muito para ser implementado.

Então, conseguimos fazer isso funcionar (pelo menos até agora) usando alguma manipulação do webpack para carregar um arquivo alternativo menor:

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

Onde o arquivo src/style.less carrega os mesmos arquivos que o arquivo index.less , mas os carrega dentro do escopo de um seletor de nível superior:

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

O resultado é que todos os estilos "globais" estão sendo aplicados com o escopo #root :

Qual versão do less-loader você está usando? Parece que só funciona com 3.0.0? Ver. por exemplo https://github.com/webpack-contrib/less-loader/issues/184

Além disso, qual versão do antd você estava usando para essa solução alternativa? A razão pela qual estou perguntando é que não tive sucesso mesmo com [email protected] e [email protected] (o webpack teve problemas para resolver após a alteração). ..

Não sei se isso ajuda alguém, mas o seguinte me ajudou a importar o CSS apenas para o componente em uso:

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

Não sei se isso ajuda alguém, mas o seguinte me ajudou a importar o CSS apenas para o componente em uso:

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

Sim, isso parece funcionar bem para muitos componentes. Sua milhagem pode variar, no entanto - pelo menos o Select precisa de um pouco mais do que apenas os próprios estilos do componente. O ícone "remover" nas seleções não será renderizado de outra forma; Não tive tempo de rastrear o problema completamente, mas provavelmente é algo menor. Portanto, pode ser necessário imitar alguns estilos dos estilos principais em alguns dos componentes.

Embora essa opção não seja perfeita, ela pode funcionar bem para muitos componentes. Os estilos personalizados correm o risco de quebrar com as atualizações, mas você obviamente pode controlar quando deseja fazer suas atualizações.

A melhor solução que encontrei para nossa organização é incluir toda a folha CSS do antd, com todos os estilos que afetam os estilos não nomeados do antd removidos. A quilometragem pode variar, e obviamente há a desvantagem de _todo_ o estilo agora sendo importado. Mas funciona bem e não vejo nenhum problema depois de fazer isso há cerca de dois meses.

@jaleikas
Você encontrou uma solução para isso? Até onde eu sei, o problema com [email protected] ainda não foi resolvido e, portanto, a correção sugerida com NormalModuleReplacementPlugin não funciona. Essa solução realmente parece ser a melhor, pois as coisas podem ser substituídas e delimitadas manualmente.
Eu tentei a mesma coisa que você, fazendo o downgrade do less-loader, mas a resolução do webpack não funciona.

Usando [email protected] aqui.

As pessoas que sofrem com isso podem querer experimentar meu fork adicionando o pacote diretamente do repositório

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

ou

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

Eu apenas descartei a base e a construí sem nenhuma outra modificação. Funciona no meu caso, não uso muitos componentes dele. Provavelmente será afetado por alguns componentes, especialmente se você ainda não tiver uma folha de estilo de redefinição razoável em seu projeto. #4546

isso funciona para mim

As pessoas que sofrem com isso podem querer experimentar meu fork adicionando o pacote diretamente do repositório

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

ou

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

Eu apenas descartei o base.less e o construí sem nenhuma outra modificação. Funciona no meu caso, não uso muitos componentes dele. Provavelmente irá quebrar a aparência de alguns componentes, especialmente se você ainda não tiver uma folha de estilo de redefinição sã em seu projeto. #4546

Obrigado por esta solução!

Você encontrou uma solução para isso? Até onde eu sei, o problema com [email protected] ainda não foi resolvido e, portanto, a correção sugerida com NormalModuleReplacementPlugin não funciona. Essa solução realmente parece ser a melhor, pois as coisas podem ser substituídas e delimitadas manualmente.

Optei por parar de usar o antd e decidi escolher alguns componentes sem estilo (como rc-switch). O problema é que a maioria dos componentes "sem estilo" são horrivelmente / não documentados, e alguns deles também parecem se comportar de maneira diferente, então, na maioria das vezes, desisti e procurei em outro lugar ...

oi, deve ser possível tentar combinar todos os elementos, começando com .ant, e atribuir estilos a eles

*[class^='ant-']{
dimensionamento de caixa: caixa de borda;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove a cor de destaque do toque para safári móvel
}

Deve ter compatibilidade entre navegadores e não deve demorar muito para ser implementado.

@tylik1 , obrigado! eu só precisava corrigir a família de fontes para corresponder ao resto do meu aplicativo de elétrons. isso me salvou totalmente.

Não sei se isso ajuda alguém, mas o seguinte me ajudou a importar o CSS apenas para o componente em uso:

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

funciona para mim pelo seguinte.

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

Infelizmente esta é uma rolha de show. Também não implementarei o Antd, embora o seletor de datas seja o melhor que encontrei até agora.

No momento, estamos procurando uma biblioteca de componentes react para nossa empresa e isso também é um problema de bloqueio para nós, e provavelmente não usamos uma formiga por causa disso.

Também estamos analisando o react MUI, que tem ótimas opções de temas, talvez você possa dar uma olhada em como eles fazem isso e implementar algo semelhante.

Eu usei https://www.npmjs.com/package/patch-package para comentar

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

de antd-mobile/es/style/index.js .
Meu objetivo era obter next.js para construir, então no meu caso eu apenas incluí um link CND no meu cabeçalho.

Era 2020, a humanidade se extinguiu, o coronavírus, o ant-design adiciona estilos globais ao projeto...

Rastreamento em #9363