Creé una aplicación en React usando la biblioteca de diseño de hormigas. En mi archivo CSS, agregué algunos estilos base:
* { box-sizing: border-box; margin: 0; padding: 0; } Espero que estos estilos anulen todos los estilos, pero no anulan los estilos antd. Al inspeccionar la etiqueta p en la consola, noté que estos estilos:
{ margin-top: 0; margin-bottom: 1em; } /// comes from antd.css anular mis estilos anteriores. ¿Cómo arreglar esto (hacer que mis estilos anulen todos los estilos) sin usar !important ?
demostración: https://codesandbox.io/s/antd-create-react-app-forked-0vs14?file=/index.js:315-811
Prueba esto:
html * { box-sizing: border-box; margin: 0; padding: 0; } Así es como funciona CSS, ya que los estilos antd apuntan directamente a la etiqueta p , si la selecciona mediante * no tendrá mayor importancia a menos que agregue detrás html * o body * o marque los estilos como !important
Working CodeSandbox que bifurqué del tuyo.
Solo necesita agregar px en valor numérico
Basado en un problema de antd github You need to improve your CSS selector's specificity. And it's not a bug.. Discusión de Github
p { box-sizing: border-box; margin: 0px; padding: 30px; }