Ant-design: CSS global incluído na importação de CSS do componente

Criado em 21 dez. 2016  ¬∑  89Coment√°rios  ¬∑  Fonte: ant-design/ant-design

Obrigado por esta grande biblioteca!

Eu tentei usar babel-plugin-import para fazer importa√ß√Ķes modulares de CSS, mas junto com o CSS para um componente individual, h√° muito CSS global sendo importado que interfere nos meus estilos existentes. √Č poss√≠vel importar o CSS para um componente individual sem que o CSS global seja inclu√≠do?

Obrigado!

ūüó£ Discussion ūüôÖūüŹĽ‚Äć‚ôÄÔłŹ WON'T RESOLVE

Coment√°rios muito √ļteis

Isso é um design terrível embora.

Todos 89 coment√°rios

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

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

Esta p√°gina foi √ļtil?
0 / 5 - 0 avalia√ß√Ķes