Ant-design: Remover estilos globais

Você também pode tentar usar componentes diretamente de https://github.com/react-component.
antd é construído sobre eles e não tem estilo.

Por favor, resolva isso. É um bloqueador difícil para nosso aplicativo.

Olá, vocês já deram uma opinião sobre o uso de uma biblioteca CSS-in-JS, como componentes de emoção ou estilo. Isso poderia resolver muitos problemas como importação global de estilos e definição do escopo dos estilos para os componentes da formiga. Além disso, também pode melhorar o tema (estilos dinâmicos). Desculpas se isso foi discutido em outro lugar, não consegui encontrar discussão (ões) relevante (s).

@ divyanshu013 Acho que li que não é uma prioridade para eles, pois o objetivo do antd é incluir a especificação do estilo antd, não apenas os componentes / javascript. Além disso, isso significa tecnicamente um monorepo para seus projetos internos, portanto, criar temas para as marcas de outras pessoas não é automaticamente uma prioridade. Dito isso, estou com você, gostaria que ele usasse componentes estilizados em vez de estilos globais.

https://github.com/ant-design/ant-design/issues/5570#issuecomment -306960517

https://spectrum.chat/thread/ca82a625-134f-49df-9900-1b0b6342e037

Ok, devo admitir que não examinei a estrutura de menos de arquivos do antd tão profundamente, então talvez alguém possa lançar alguma luz sobre isso:

Quão grande é uma ofensa simplesmente incluir apenas o arquivo less do componente? Por exemplo, faça algo como

import {Select} from 'antd';
import 'antd / lib / select / style / index.less';

Com base em um teste rápido, parece funcionar, o que me deixou curioso ...
Tenho certeza de que isso será interrompido com as atualizações, mas as outras soluções também parecem arriscar.

Isso está relacionado à capacidade de importar estilos para componentes individuais. Se os estilos dos componentes fossem autocontidos, as pessoas poderiam ativar ou desativar a redefinição / estilos globais.

Situação agora:

• A remoção de redefinições e estilos globais não é viável porque seria uma alteração significativa.
• Importar estilos para componentes individuais não funciona atualmente porque às vezes eles têm dependências ocultas e contam com estilos globais.

Como podemos tornar os componentes autocontidos de uma forma ininterrupta? Acho que uma solução poderia ser usar o Storybook para configurar alguns testes de regressão visual isolados.

Você pode gerar instantâneos com estilos globais incluídos e, em seguida, remover os estilos globais e adicionar estilos nos arquivos menos componentes até que os testes sejam aprovados, garantindo que o estilo seja o mesmo com ou sem os estilos globais.

ref # 4331 # 13459

_A desculpas por criar um problema semiduplicado. Para consolidar a conversa, farei novamente minhas perguntas um tanto diferentes aqui._

E se a comunidade pudesse fazer o trabalho de transição de estilos de componentes para não depender mais de estilos globais?

Uma abordagem (obrigado @DylanVann):

1. Adicionar teste de regressão visual automatizado para todos os componentes
2. Refatorar estilos de componentes para usar estilos anteriormente globais de maneira não global
   
   
   
   • Eu gosto da abordagem [class="ant-"] { ... } , mas provavelmente muitas opções aqui
   
   
3. Confirme que não há alterações significativas nos componentes
4. Ofereça o base.less de hoje, com estilos globais, como uma importação opcional, para aqueles que dependem dele

O Ant está aberto a:

1. Revendo e potencialmente aceitando PR (s) para esse trabalho?
2. Aceitando o compromisso de fornecer uma importação opcional para os consumidores que atualmente dependem dos estilos globais?

Qualquer atualização?

Olá!
Resolvi isso importando estilos de componentes de uma maneira diferente.

Inicialmente, eu importava estilos como este:
import 'antd/lib/button/style/css';

Mas que css.js não importe apenas os estilos do botão, também importe estilos gerais, este é o seu conteúdo:

"use strict";

// General styling (body, h1, h2..)
require("../../style/index.css");

// Button styles
require("./index.css");

Então resolvi apenas importando index.css arquivo como este:
import 'antd/lib/button/style/index.css';

Belo achado!

Existem componentes mais complexos que dependem de mais de um arquivo index.css ?
Existem componentes que quebrariam sem o arquivo de estilos gerais principal?

Belo achado!

Obrigada 😄

Existem componentes mais complexos que dependem de mais de um arquivo index.css ?

Talvez nesse caso eu importasse todos os arquivos, acho que não seriam muitos.

Existem componentes que quebrariam sem o arquivo de estilos gerais principal?

Funcionou bem com botões (o único componente que usei).
Mas talvez alguns componentes possam usar esses estilos, isso é algo que preciso verificar.

Eu faço isso da mesma forma que @fedebabrauskas , e tudo parece estar funcionando bem.

@fedebabrauskas Parece que a animação do componente não seria habilitada (tentei Popover, os estilos são bons, mas não tem animação)

Ok, devo admitir que não examinei a estrutura de menos de arquivos do antd tão profundamente, então talvez alguém possa lançar alguma luz sobre isso:

Quão grande é uma ofensa simplesmente incluir apenas o arquivo less do componente? Por exemplo, faça algo como

import {Select} from 'antd';
import 'antd / lib / select / style / index.less';

Com base em um teste rápido, _parece_ funcionar, o que me deixou curioso ...
Tenho certeza de que isso será interrompido com as atualizações, mas as outras soluções também parecem arriscar.

Este é um salva-vidas!
Eu estava usando import 'antd / dist / antd.css'; dentro do componente e isso bagunçou os estilos globais.
Pesquisei no Google e encontrei este problema.
Eu precisava apenas dos estilos para o componente switch, então tentei importar 'antd / lib / switch / style / index.less'; e bum! funcionou!!
Muito obrigado amigo !!
Implementação de código
Portfólio implantado

Então, só para confirmar, a partir de Hoje não é possível NÃO importar index.css ?

Estou usando Gatbsy e meu global.css está sendo substituído por formigas index.css .

Como workaroud - acabei de criar um script de pós-instalação como abaixo

scripts/postinstall.js

#!/usr/bin/env node
const replace = require('replace-in-file');

const removeAntdGlobalStyles = () => {
    const options = {
        files: [`${process.cwd()}/node_modules/antd/lib/style/core/index.less`, `${process.cwd()}/node_modules/antd/es/style/core/index.less`],
        from: "<strong i="8">@import</strong> 'base';",
        to: '',
    };

    replace(options)
        .then(() => {
            console.log('[INFO] Successfully Removed Antd Global Styles:');
        })
        .catch(e => {
            console.error('[ERR] Error removing Antd Global Styles:', e);
            process.exit(1);
        });
};


removeAntdGlobalStyles();

package.json

 "devDependencies": {
  //other dependancies
  "replace-in-file": "^5.0.2"
},
"scripts": {
  // other scripts
  "postinstall": "node scripts/postintall.js"
}

Observação : estou usando o babel-plugin-import para

Como workaroud - acabei de criar um script de pós-instalação como abaixo

scripts/postinstall.js

#!/usr/bin/env node
const replace = require('replace-in-file');

const removeAntdGlobalStyles = () => {
    const options = {
        files: [`${process.cwd()}/node_modules/antd/lib/style/core/index.less`, `${process.cwd()}/node_modules/antd/es/style/core/index.less`],
        from: "<strong i="9">@import</strong> 'base';",
        to: '',
    };

    replace(options)
        .then(() => {
            console.log('[INFO] Successfully Removed Antd Global Styles:');
        })
        .catch(e => {
            console.error('[ERR] Error removing Antd Global Styles:', e);
            process.exit(1);
        });
};

removeAntdGlobalStyles();

package.json

 "devDependencies": {
  //other dependancies
  "replace-in-file": "^5.0.2"
},
"scripts": {
  // other scripts
  "postinstall": "node scripts/postintall.js"
}

O script remove os estilos básicos, mas ainda não elimina os estilos antd globais. Você importa estilos para cada componente antd ou um único arquivo dist css.

@ himanshuc3 Estou usando o babel-plugin-import para

@fedebabrauskas Parece que a animação do componente não seria habilitada (tentei Popover, os estilos são bons, mas não tem animação)

mesmo caso, mas com colapso

babel-plugin-import importa estilos globais,
e importando um arquivo css de componente específico como este:
import 'antd/lib/date-picker/style/index.css';
quebra o Datepicker (ele se abre e fecha de maneiras estranhas e inesperadas).

Alguma solução alternativa para isso?

omg, estou usando um componente de transferência que depende de muitos outros componentes ... Agora perceba que todo o meu cabeçalho de tipografia escura não segue minhas cores primárias etc. etc.

+1

+1

Esta é uma solução alternativa que usei em um aplicativo de demonstração que usa Ant Design junto com outras bibliotecas de componentes:

index.scss :

.antPage {
  <strong i="8">@import</strong> '~antd/dist/antd.min';
  ...
}

Portanto, agora todos os estilos globais do Ant têm namespaces, e posso fazer isso na minha página com o estilo do Ant:

function AntPage() => <div className="antPage">...</div>

Mas então eu recebo outro problema, já que alguns dos componentes fornecidos por esta biblioteca não podem realmente lidar com estilos com namespaces :(

Por exemplo, DatePicker renderiza a marcação _fora_ do corpo, então o componente resultante não está dentro de .antPage e, portanto, os estilos não funcionam. O mesmo vale para menus suspensos e outros componentes que precisam de marcação extra para funcionar.

Então, se eu tentar a solução alternativa sugerida acima:

import 'antd/es/date-picker/style/index.css'
import 'antd/es/dropdown/style/index.css'
import 'antd/es/input/style/index.css'

Isso _quase_ funciona, mas começa a se comportar de maneira estranha: quando eu foco um selecionador de data, ele não aparece, mas permanece com opacity: 0 . Então, assim que perder o foco, o selecionador de data flutuante aparecerá ... 😕

Não tenho certeza de como carregar os estilos separadamente afetaria o comportamento, pode ser um bug diferente.

Em qualquer caso, vamos ver se uma versão de estilos não globais pode resolver o problema para o bem: +1:

@OscardR Acredito que esse problema tenha a ver com a não inclusão dos arquivos css de movimento <strong i="6">@import</strong> 'antd/es/style/core/motion.less'; corrigiu para mim.

Se outra pessoa tiver problemas semelhantes e quiser importar todos os estilos, mas não tiver os globais:

Importei todos os arquivos .less e os coloquei em um arquivo antd.less , depois importei esse arquivo em vez dos arquivos dist que incluem os estilos globais.

https://gist.github.com/SPDUK/b93e9c28c11e41d5f3b6d9ad9fc7be36

Temos alguma outra opção se eu não for um usuário menos? Estou usando ousadia e não quero adicionar menos apenas para corrigir isso. Eu gostaria de poder carregar apenas os arquivos css mínimos para executar o componente Selecionar

Quase 3 anos que vejo esse problema aparecer no topo da minha página inicial do Github.

Eu parei de usar formiga há muito tempo. Posso apenas fechar isso e deixar a comunidade ou os mantenedores seguirem em outro lugar?

Qualquer coisa sobre Remove global Styles , todos agora estão se concentrando nisso, por favor, apenas unsubscribe este problema se você não quiser saber mais sobre ele, obrigado!

Não acho que seja a melhor ideia. Muitos de nós ainda estamos usando o Antd e adoraríamos que esse problema fosse resolvido.
É bom ter uma edição principal com toda a história.