¿Te refieres a reglas CSS como esta?

html,
body {
  ...
}

Si.

Es imposible no importar esas reglas CSS ahora.

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

Tiene que anular estos estilos globales ahora.

O suelta la opción style de babel-plugin-import , importa menos archivos de forma independiente.

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

Sin embargo, ese es un diseño terrible.

Este problema hace que sea muy difícil trabajar con esta biblioteca. Especialmente tener propiedades globales en el cuerpo, etc. Creo que este problema debería aclararse mucho más a menos que tenga planes para cambiar esto.

@Forestdev @peitalin es un problema conocido, pero no tenemos suficiente tiempo para resolverlo.

Pero podemos seguir discutiendo aquí.

Si podemos importar cambios importantes, podemos resolver este problema. Por ejemplo, mover estilos al restablecer los estilos de los componentes:

Muevete:

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

A:

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

Y para la compatibilidad con versiones anteriores, podemos proporcionar una hoja de estilo de reinicio independiente.

import 'antd/styles/reset.less'

¿Hay alguna actualización sobre esto?

Podemos discutir, pero no tenemos tiempo para aplicar ninguna solución (si podemos encontrarla) ahora.

Creo que este es un problema crítico, ya que no muchas personas pueden permitirse importar un css global y anular sus estilos existentes.

Eso es realmente molesto, lo que me impidió adoptar Antd.

Esto bloqueará a muchos desarrolladores#

Debido a que Ant no es compatible con el arranque, tuve que dejar de usar Ant.

¿Qué tal poner menos archivos en una biblioteca independiente?

por cierto. estoy intentando

Discusión relacionada: https://github.com/palantir/blueprint/issues/244

Hola chicos, estoy trabajando en [email protected] y trato de encontrar una solución para el problema de estilos globales.

Probé la solución de import 'antd/styles/reset.less' de @benjycui. Resulta que sería un cambio radical y haría que la importación de estilos fuera mucho más complicada, especialmente con babel-plugin-import. Así que decido pasarlo.

Entonces encuentro que el punto principal de este problema es sobre babel-plugin-import que convertirá el código en:

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

La mejor solución para esto es no usar la opción style de babel-plugin-import e importar el estilo manualmente.

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

// your global styles
body {
 ...
}

Así que abandono toda la idea reset.less y simplemente elimino los molestos códigos de reinicio como: https://github.com/ant-design/ant-design/blob/afce275d25abe958b32cf15ba1f16c49f4fca900/components/style/core/base. menos#L33 -L50

También agregué mejor código tipográfico de bootstrap@v4 para resolver #6162

Todas las actualizaciones están en #7682 ahora y pronto se fusionarán con antd-3.0.

Simplemente cambie import 'antd/styles/reset.less a import 'antd/styles/typography.less .

Cuando los usuarios actualizan desde [email protected] , import 'antd/styles/typography.less es un adaptador para facilitar la migración.

Cuando los usuarios que son nuevos en antd, import 'antd/styles/typography.less es una característica opcional, por lo que no necesitan preocuparse por los conflictos.

Añadido 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';

¿Puede alguien explicar algunos pasos para solucionar este problema ya que este problema está cerrado ahora? Estoy tratando de usar antd en el script de contenido de una extensión de Chrome y se estropea con todas las páginas web.

@abhinavzspace puede instalar antd@next para obtener la compilación 3.0 Alpha, que resuelve este problema un poco, pero no por completo.

Después de mucho tiempo, encontré una solución que funcionó para mí. Tal vez funcione para otros...

El problema es que cada componente importa un montón de restablecimientos y anulaciones globales (incluido normalize.css) desde style/core/base.less , si estos estilos se cargan de forma asíncrona, anulan los estilos de página y lo estropean todo.

Encontré que agregar

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

al punto de entrada de mi proyecto hace que el paquete web empaquete los reinicios antes que todos los demás estilos, por lo que cuando se carga un componente asíncrono, no importa/incluye los reinicios nuevamente.

¿Debería dar otro index.less para cada componente? el index.less puede ser controlado. y también casi todos los archivos eliminan la directiva @import o simplemente usan @import (referencia)

¿Será una buena solución?

tsk tsk tsk. Este problema debe estar "Abierto" para que todos sepan que se trata de un problema conocido. Acabo de abandonar antd en medio de un proyecto solo por esto.

Esto es un verdadero fastidio. Me recomendaron Ant y parece prometedor, pero este comportamiento arruina nuestro diseño existente y hace que Ant se sienta como Bootstrap. 😦

Ant debe opinar sobre la apariencia de sus propios componentes, pero no sobre la apariencia del sitio del usuario.

Este problema implica que Ant 3 soluciona este problema. Pero sigo viendo muchos estilos globales. ¿Qué deben hacer los usuarios para evitar agregar esos estilos globales?

@openjck Descubrí que esto parece restablecer los estilos globales (lo agregué a mi punto de entrada de React):

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

Lo encontré enterrado en su registro de cambios

Encontré esa nota, pero no me funcionó. La documentación es bastante escasa. ¿Qué otras importaciones relacionadas con el estilo hiciste y en qué orden?

En cuanto a los estilos Ant, eso es todo. También estoy usando la configuración style: true , lo que podría importar.

¿Qué tipo de cambios de estilo global estás viendo?

Estoy usando React con webpacker y rails y tengo el mismo problema antes. Para resolver eso, en mi vista HTML, agrego la etiqueta de enlace de la hoja de estilo del nombre del archivo CSS existente debajo de stylesheet_pack_tag, y eso funciona.
= javascript_pack_tag 'root'
= stylesheet_pack_tag 'root'
= stylesheet_link_tag 'application'

@ jhdavids8 , ¿dónde está configurando style: true ? No estoy seguro de que eso se aplique a mi configuración.

Estoy usando crear-reaccionar-aplicación. La documentación recomienda agregar esto a una de las principales hojas de estilo:

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

... pero al hacerlo se introducen cambios de estilo globales, como una familia de fuentes y una altura de línea que se establecen en el cuerpo.

Solo estoy usando babel-plugin-import como se documenta aquí para importar estilos a pedido. La opción style: true es una forma de importar los archivos fuente de Sass (ver esto ), que necesitamos ya que también personalizamos mucho el tema Ant.

Nuestro equipo acaba de abandonar antd por los estilos globales 😭. Sé que está ocupado, pero si pudiera encontrar una manera de resolver esto, aumentaría radicalmente el alcance de antd.

Vuelva a abrir este problema. Sigo viendo este comportamiento y otros también.

+1

+1

El css global agregado por mí mismo se empaquetará en medio de /lib/style/index.css cada vez, solo quiero eliminar el antd
Agregue la pantalla correcta en IE 10-.
atrás
html,
cuerpo {
ancho: 100%;
altura: 100%;
}
¿Por qué es tan difícil? ¿Por qué no se puede colocar el css global personalizado al final de /lib/style/index.css?

+1

+1

Descubrí que pude resolver el problema de la manera descrita por @afc163 .

Por lo general, haría import 'antd/lib/tabs/style/css'; , que apunta a un archivo que contiene solo esto:

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

Solo quería importar Tabs CSS, así que agregué esto a mi archivo de componente:

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

Y pareció darle estilo a mi componente de pestañas apropiadamente sin afectar el resto de la página.

Sin embargo, tenga cuidado, ya que el primer estilo está ahí por una razón: quizás algunos componentes de antd dependan de él más que otros y es posible que esto no funcione en todos los casos.

_Si aún no lo está haciendo, asegúrese de eliminar la propiedad style de sus complementos .babelrc:
[ "import", { "libraryName": "antd" } ] _

¡Espero que eso ayude a alguien!

Esto es una locura... Una biblioteca de componentes "modulares", que interfiere con los estilos globales. No tengo idea de por qué esta biblioteca es tan apreciada porque se equivoca en algo tan fundamental. Sin mencionar que han cerrado este ticket como si el problema estuviera resuelto.

@strongui babel-plugin-import no funciona para usted?

@abenhamdine No, no lo hace. Y no estoy solo a juzgar por los comentarios anteriores.

Usando la última versión de la biblioteca, todavía tengo este problema.

¿Alguien encontró una solución (idealmente no un reinicio)?

He tenido éxito al importar el CSS exacto para los componentes más pequeños que necesito

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

Pero ahora estoy tratando de implementar una tabla. La tabla se basa en muchos estilos, por lo que tuve que importar todas las hojas CSS por separado, lo cual está bien. _Excepto_ que para la función de clasificación necesito el CSS icon , que no existe dentro antd/lib/icon . En cambio, tuve que importar la hoja de estilo principal ya que el ícono css simplemente lo redirige.

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

Este es el archivo que afecta al resto de mi aplicación ☝️

Como mínimo, ¿puedes hacer que ninguna hoja CSS redirija a la principal? (¿Como el icon que necesito para la clasificación de tablas?)

Además, @ afc163 vuelva a abrir este problema, no se ha resuelto.

Simplemente lea el hilo y vea la etiqueta "NO ARREGLAR". Este es un error P0 que bloquea todas las aplicaciones grandes, componentes integrados que eligen Ant.D para convertirse en su componente lib. La etiqueta debe ser 'HEART BREAKING'.

@ afc163 ¿por qué en el mundo esto está marcado como no se arreglará? El núcleo de la filosofía de reacción y el diseño modular es que los componentes NO se mezclen con otros componentes. Esto no tiene absolutamente ningún sentido. Pasé un tiempo y extraje el css para la selección de árbol y pude hacer que funcione sin afectar nada más, así que sé que es posible.

+1 por reabrir este problema. Intentar hacer la transición de nuestra aplicación de Material-UI a AntD y esta es una gran barrera de entrada.

+1 para la reapertura. babel-plugin-import no funciona para mí, probé todos los trucos e instrucciones. No puedo cambiar la fuente global de mi aplicación 😱

Hubo un problema relacionado en blueprintjs palantir/blueprint#244 .

Una sugerencia es usar un complemento postcss llamado: css-byebye
https://github.com/AoDev/css-byebye

Esto puede ayudar como una solución temporal.

Gran biblioteca pero forma horrible de tratar a sus usuarios. ¿Por qué se deben cambiar las fuentes predeterminadas? ¿Y por qué no hay forma de restablecer las fuentes y el estilo?

Esto nos impide, y muchos otros, a juzgar por la lectura de los comentarios, usar esta biblioteca.

No sé si se trata de un problema de idioma/cultural, pero los desarrolladores de esta biblioteca toman nota: ¿Cuál es el punto de hacer una biblioteca que nadie quiera usar? ¿Por qué está dificultando que sus compañeros desarrolladores usen su biblioteca?

¿Cuál es el punto de hacer una biblioteca que nadie quiera usar? ¿Por qué está dificultando que sus compañeros desarrolladores usen su biblioteca?

Por favor, mantenlo moderado.
Muchos desarrolladores y startups usan o quieren usar esta biblioteca.

Esta biblioteca es de código abierto y gratuita. Si no quieres usarlo, no lo uses.
Si desea modificarlo, puede bifurcarlo para su propio uso o enviar un PR, los mantenedores de ant-design están abiertos a contribuciones.

Así que no hay necesidad de despotricar aquí.

Este problema también es un factor decisivo para mi equipo.
Nos encanta el proyecto y todo el trabajo que se hizo, pero este único problema nos impide usarlo.

Es por eso que todavía sigo este problema con la esperanza de que se vuelva a abrir y se solucione en un futuro cercano.

Oh, soy muy moderado. Y no estoy despotricando aquí.

Le llamo la atención que su biblioteca, aunque es excelente, no debería tener efectos secundarios innecesarios. ¡Imagínese si uso MomentJS (por ejemplo) y comienza a mostrar fechas y horas en Klingon!

"Go fork yourself" tampoco es la respuesta. De hecho, ese es el estado triste y patético de muchos proyectos de código abierto.

Estamos construyendo sistemas complejos nosotros mismos, no somos novatos aquí. Queremos usar una biblioteca y seguir con nuestras vidas. Al menos debería haber una manera de pedirle a la biblioteca que no cambie la fuente o el tamaño de fuente predeterminados. Eso es todo lo que yo, y muchos otros aquí, estamos pidiendo.

Puede elegir ser sordo e ignorar estas preocupaciones, concentrándose en lugar de elegir mis palabras, O puede elegir entender lo que dice la gente aquí y proporcionarles una manera de usar su biblioteca sin efectos secundarios.

Que la fuerza te acompañe mientras tengas una vida larga y próspera.

No podría estar más de acuerdo con @kotpal . Lo que me sorprende es que esta discusión no se trata de "¿puedes agregar esta característica?" o "¿no sería bueno si..."? Literalmente trata de convencer a un autor de que un componente no debería interferir con el entorno global. Expresar. Literalmente, está en blanco el concepto central de ReactJS y cualquier diseño modular.

NO te metas con nada GLOBAL, a menos que estés proporcionando un tema global o algo así.

Entiendo lo que dice @abenhamdine . Pero también estoy de acuerdo con @strongui .

Tal vez se supone que Ant es toda una experiencia. Pero en la práctica, muchas personas aún necesitan trabajar con código heredado que simplemente no pueden cambiar. Y si este proyecto choca con ese código antiguo, perdemos todos los beneficios de usar React (o cualquier otro marco similar) en primer lugar.

Si este problema impide que tantas personas adopten el proyecto por completo, ¿quizás podamos unirnos y ofrecer una recompensa por él o algo así?

Sé que no tengo el conocimiento ni el tiempo para solucionar este problema por mi cuenta, entonces, ¿qué haría falta para que los colaboradores lo solucionen? (y sí, es un problema y no una característica)

He tenido cierto éxito anulando el css global proporcionado por antd y usando proyectos como jsx con estilo.
¡Puedes ver el sitio desplegado aquí! PD: su trabajo en progreso.

Acabo de encontrarme en la misma situación y he tenido un éxito moderado usando el mismo enfoque descrito por @inverts y @corinnebrady (https://github.com/ant-design/ant-design/issues/4331#issuecomment -361421192 y https://github.com/ant-design/ant-design/issues/4331#issuecomment-365481037). Entonces, algunos de mis componentes se ven así:

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

Esto funciona bastante bien con la mayoría de los componentes antd, pero hay otros que no tienen un archivo css específico asociado a ellos, y sus estilos solo se pueden encontrar en el global. Este es el caso del componente icon , para hacerlos funcionar tuve que copiar manualmente todos los estilos relacionados con los íconos del archivo global a mi propia hoja de estilos. Mantenedores: ¿aceptarían un PR para incluir un antd/lib/icon/style/index.css ?

Parece que también puede incluir menos archivos individuales, por ejemplo, import 'antd/lib/spin/style/index.less'

¿Algún plan para resolver este problema oficialmente?

Sigue siendo un problema, pero estoy tratando de solucionarlo con importaciones referenciadas como explica @reyronald .

También estoy atascado con el problema de estilo de Icon .

@reyronald , ¿puedes hacer un PR, por favor?

Las personas que sufren de esto pueden querer probar mi bifurcación agregando el paquete directamente desde el repositorio

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

o

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

Solo descarté base.less y lo construí sin ninguna otra modificación. Funciona en mi caso, no uso muchos componentes de él. Probablemente romperá el aspecto de algunos componentes, especialmente si aún no tiene una hoja de estilo de reinicio sana en su proyecto. #4546

Hola , @afc163 . También me gustaría ingresar aquí y agregar una voz adicional para solucionar este problema. Creamos una aplicación grande con muchos objetivos, y algunos de nuestros objetivos se cargan en sitios de terceros. antd interferir con el CSS global es problemático para nosotros porque terminamos eliminando los restablecimientos de CSS y las fuentes para esos sitios de terceros. Nos encanta la biblioteca y nos encantaría contribuir a una solución si los mantenedores estuvieran dispuestos a indicarnos una dirección. Vuelva a abrir o dirija la conversación a otro tema abierto. Gracias

Así que pudimos hacer que esto funcionara (al menos hasta ahora) mediante el uso de alguna manipulación webpack para cargar un archivo menos alternativo:

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

Donde el archivo src/style.less carga los mismos archivos que el archivo index.less , pero los carga dentro del alcance de un selector de nivel superior:

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

El resultado es que todos los estilos "globales" se aplican con el alcance #root :

`#artículo raíz,

raíz a un lado,

diálogo raíz,

título de raíz,

figura raíz,

pie de página raíz,

encabezado raíz,

grupo h raíz,

raíz principal,

navegación raíz,

sección raíz {

bloqueo de pantalla;
}
`
etc...

Espero que esto sea útil para alguien.

Amigos, es realmente molesto. Este comportamiento de estilo no es lo que esperarías de una biblioteca de interfaz de usuario de clase mundial.

Mencione al menos el restablecimiento global en los documentos, para que la gente no se confunda. O probablemente sea útil alguna guía "Integración en un sitio web heredado" con una receta sobre la importación de estilos e íconos individuales.

Creo que los mantenedores se dieron de baja de este problema después de que se cerró porque no han participado en la discusión desde entonces, por lo que probablemente no recibamos ningún apoyo oficial sobre esto a menos que abramos un nuevo problema, hagamos ping directamente o abramos un PR.

Finalmente encontré una manera de eludir este problema produciendo un nuevo archivo CSS basado en el antd.css original, con cada regla prefijada con una clase personalizada. Mi solución usa el complemento PostCSS, Gulp y postcss-prefixwrap :

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

Está lejos de ser perfecto, pero funciona sorprendentemente bien. Al menos para mis necesidades ;-)

La esencia también contiene una versión preparada de antd CSS, con el prefijo .antd-ns ("ns" como abreviatura de "espacio de nombres").

Notas:
Un requisito importante para mí fue que está automatizado, por lo que CSS prefijado se puede producir fácilmente para cada nuevo lanzamiento de ant.

• está pensado solo como una herramienta para crear el CSS prefijado; por lo que podría ejecutarse desde una carpeta diferente separada de su proyecto. ¡No es necesario que su proyecto basado en antd incluya PostCSS o Gulp! El CSS resultante solo debe colocarse en la carpeta CSS estática de su proyecto (lo que hace Gulp si está configurado en consecuencia).
• postcss-prefixwrap debe ser al menos la versión 1.3.0, que incluye mi parche para preservar las animaciones de fotogramas clave antd

¡Comentarios / comentarios siempre apreciados!

Gracias a @dbtedman por hacer esto posible con su excelente complemento PostCSS postcss-prefixwrap .

¡Comentarios / comentarios apreciados!

Finalmente encontré una manera de eludir este problema produciendo un nuevo archivo CSS basado en el antd.css original, con cada regla prefijada con una clase personalizada.

Esta es en mi humilde opinión la solución más directa.
Personalmente, actualmente no necesito esto, pero sería beneficioso para todos si alguien enviara un PR para agregar un nombre de clase menos variable (por ejemplo .@{scope} ) antes de cada regla css en menos archivos.

Por defecto, esta variable estaría vacía, para evitar romper el comportamiento actual.

Uno solo tendría que configurar la variable con, por ejemplo, antd para aislar los estilos.

Creo que esta solución sería aceptable para los mantenedores y permitiría seguir adelante.

Aquí hay una solución que funcionó para mí. Creé el archivo 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';

En .babelrc tengo:

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

para optimizar el tamaño de compilación de JS como se describe en https://ant.design/docs/react/getting-started#Import -on-Demand y https://github.com/ant-design/babel-plugin-import

Para un estilo personalizado, cambié la configuración de mi paquete web a:

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

como se describe en https://ant.design/docs/react/customize-theme#1)-Using-theme-property-(recommended-way)

Por cierto: intenté usar new webpack.IgnorePlugin(/style\/core\/base/) para simplemente ignorar este archivo "base.less" del procesamiento, pero no pude hacerlo funcionar. no sé por qué Mi hipótesis es que porque se procesa con LESS, y no con Webpack directamente.

Por lo que vale, edité manualmente antd.css y pude eliminar el estilo no deseado sin romper los componentes antd que uso.

@paneq Actualmente estoy haciendo lo mismo. Tenga en cuenta que la opción de estilo babel-plugin-import también podría ser una función que puede decidir si se debe incluir un estilo. Simplemente no conseguí que funcionara. Habría que depurar eso…
¿Quizás también estoy malinterpretando esa opción?

@paneq Copié lo que hiciste y parece que funcionó hasta ahora, pero no probé suficientes componentes para ver cuáles requieren ese css global. Gracias

@vthinkxie

hola, debería ser posible intentar hacer coincidir todos los elementos, comenzando con .ant, y asignarles estilos

*[clase^='hormiga-']{
tamaño de caja: cuadro de borde;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // elimina el color de resaltado del toque para el safari móvil
}

Debería tener compatibilidad con todos los navegadores y no debería llevar mucho tiempo implementarlo.

Así que pudimos hacer que esto funcionara (al menos hasta ahora) mediante el uso de alguna manipulación webpack para cargar un archivo menos alternativo:

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

Donde el archivo src/style.less carga los mismos archivos que el archivo index.less , pero los carga dentro del alcance de un selector de nivel superior:

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

El resultado es que todos los estilos "globales" se aplican con el alcance #root :

¿Qué versión de less-loader estás usando? Parece que solo funciona con 3.0.0? Ver. por ejemplo , https://github.com/webpack-contrib/less-loader/issues/184

Además, ¿qué versión de antd estaba usando para esta solución? La razón por la que pregunto es que no tuve éxito ni siquiera con [email protected] y [email protected] (webpack tuvo problemas para resolverse después del cambio). ..

No sé si esto ayuda a alguien, pero lo siguiente me ayudó a importar el CSS solo para el componente en uso:

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

No sé si esto ayuda a alguien, pero lo siguiente me ayudó a importar el CSS solo para el componente en uso:

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

Sí, esto parece funcionar bien para muchos componentes. Sin embargo, su kilometraje puede variar; al menos, Select necesita un poco más que solo los estilos propios del componente. El ícono "eliminar" en las selecciones no se representará de otra manera; No tuve tiempo de rastrear el problema por completo, pero probablemente sea algo menor. Por lo tanto, es posible que deba imitar algunos estilos de los estilos principales en algunos de los componentes.

Si bien esta opción no es del todo perfecta, podría funcionar bien para muchos componentes. Los estilos personalizados corren el riesgo de romperse con las actualizaciones, pero obviamente puede controlar cuándo desea realizar sus actualizaciones.

La mejor solución que encontré para nuestra organización es incluir la hoja CSS completa de antd, eliminando cualquier estilo que afecte a los estilos con nombre que no sean antd. El kilometraje puede variar, y obviamente existe la desventaja de que ahora se importan _todos_ los estilos. Pero funciona bien y no he visto ningún problema después de hacerlo durante unos dos meses.

@jaleikas
¿Has encontrado una solución a esto? Por lo que puedo decir, el problema con [email protected] aún no está resuelto y, por lo tanto, la solución sugerida con NormalModuleReplacementPlugin no funciona. Esa solución en realidad parece ser la mejor, ya que las cosas se pueden anular y delimitar manualmente.
Intenté lo mismo que usted, degradando el cargador menos, pero luego la resolución del paquete web no funciona.

Usando [email protected] aquí.

Las personas que sufren de esto pueden querer probar mi fork agregando el paquete directamente desde el repositorio

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

o

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

Solo descarté la base y la construí sin ninguna otra modificación. Funciona en mi caso, no uso muchos componentes de él. Probablemente se verá afectado por algunos componentes, especialmente si aún no tiene una hoja de estilo de restablecimiento razonable en su proyecto. # 4546

this works for me

Las personas que sufren de esto pueden querer probar mi bifurcación agregando el paquete directamente desde el repositorio

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

o

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

Solo descarté base.less y lo construí sin ninguna otra modificación. Funciona en mi caso, no uso muchos componentes de él. Probablemente romperá el aspecto de algunos componentes, especialmente si aún no tiene una hoja de estilo de reinicio sana en su proyecto. #4546

¡Gracias por esta solución!

¿Has encontrado una solución a esto? Por lo que puedo decir, el problema con [email protected] aún no está resuelto y, por lo tanto, la solución sugerida con NormalModuleReplacementPlugin no funciona. Esa solución en realidad parece ser la mejor, ya que las cosas se pueden anular y delimitar manualmente.

Elegí dejar de usar antd y decidí elegir algunos componentes sin estilo (como rc-switch). El problema es que la mayoría de los componentes "sin estilo" están horriblemente o no están documentados, y algunos de ellos también parecen comportarse de manera diferente, así que en su mayor parte, me rendí y busqué en otro lado...

hola, debería ser posible intentar hacer coincidir todos los elementos, comenzando con .ant, y asignarles estilos

*[clase^='hormiga-']{
tamaño de caja: cuadro de borde;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // elimina el color de resaltado del toque para el safari móvil
}

Debería tener compatibilidad con todos los navegadores y no debería llevar mucho tiempo implementarlo.

@tylik1 , gracias! Solo necesitaba arreglar la familia de fuentes para que coincidiera con el resto de mi aplicación de electrones. esto me salvó totalmente.

No sé si esto ayuda a alguien, pero lo siguiente me ayudó a importar el CSS solo para el componente en uso:

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

me funciona de la siguiente manera.

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

Desafortunadamente, este es un tapón de espectáculo. Tampoco implementaré Antd a pesar de que el selector de fecha es el mejor que pude encontrar hasta ahora.

Actualmente estamos buscando una biblioteca de componentes de reacción para nuestra empresa y esto también es un problema de bloqueo para nosotros, y probablemente no usemos ant por eso.

También estamos analizando reaccionar MUI, que tiene excelentes opciones de temas, tal vez puedas ver cómo lo hacen e implementar algo similar.

Usé https://www.npmjs.com/package/patch-package para comentar

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

desde antd-mobile/es/style/index.js .
Mi propósito era obtener next.js para compilar, así que en mi caso solo incluí un enlace CND en mi encabezado.

Era 2020, la humanidad se extinguía, el coronavirus, el diseño de hormigas agrega estilos globales al proyecto...

Seguimiento en #9363