在反應js中覆蓋css styles

Question

我使用 ant 設計庫在 React 中創建了一個應用程序。 在我的 CSS 文件中，我添加了一些基礎 styles：

 * { box-sizing: border-box; margin: 0; padding: 0; }

我希望這些 styles 應該覆蓋所有 styles，但它們不會覆蓋 antd styles。 檢查控制台中的p標簽，我注意到這些 styles：

 { margin-top: 0; margin-bottom: 1em; } /// comes from antd.css

覆蓋我之前的 styles。 如何在不使用!important的情況下解決此問題（使我的 styles 覆蓋所有樣式）？
演示： https://codesandbox.io/s/antd-create-react-app-forked-0vs14?file=/index.js:315-811

Answer 1

您只需要在數值中添加px

基於 antd github issue You need to improve your CSS selector's specificity. And it's not a bug.. You need to improve your CSS selector's specificity. And it's not a bug.. Github 討論

p {
  box-sizing: border-box;
  margin: 0px;
  padding: 30px;
}

Answer 2

嘗試這個：

html * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

This is how CSS works, since antd styles target directly the p tag, you selecting it via * won't have a higher importance unless you add behind it html * or body * or mark the styles as !important

我從你那里分叉出來的工作 CodeSandbox 。