为什么在使用react和antd时不能将margin-bottom-bottom重置为0？

编程问答 2022-11-14

问题描述

我正在练习react，并将yarn run v1.22.4 $ testcafe chrome e2e-tests/ The "browsers" option from the configuration file will be ignored. ERROR Cannot prepare tests due to an error. Error: Using removed Babel 6 option: .resolveModuleSource - Use `babel-plugin-module-resolver@3`'s 'resolvePath' options at throwUnkNownError (project/node_modules/@babel/core/lib/config/validation/options.js:121:11) at project/node_modules/@babel/core/lib/config/validation/options.js:108:5 at validatenested (project/node_modules/@babel/core/lib/config/validation/options.js:84:21) at validate (project/node_modules/@babel/core/lib/config/validation/options.js:75:10) at loadPrivatePartialConfig (project/node_modules/@babel/core/lib/config/partial.js:76:50) at loadFullConfig (project/node_modules/@babel/core/lib/config/full.js:57:46) at Function.transform (project/node_modules/@babel/core/lib/transform.js:25:45) at evaluateSync (project/node_modules/gensync/index.js:244:28) at Function.sync (project/node_modules/gensync/index.js:84:14) at Object.transform (project/node_modules/@babel/core/lib/transform.js:36:54) 放在index.html的开头以重置样式。但是，<link rel="stylesheet" href="%PUBLIC_URL%/css/reset.css" />有一个<h1>，无法重置。在Chrome调试器中，我发现这些样式如下，但是我从未在上部编写样式。我想知道它的来源以及如何将margin-bottom-bottom重置为0。（我在锻炼项目中使用了create-react-app和antd组件。）

enter image description here

解决方法

您是否尝试过将* { margin: 0; }添加到CSS？

*将定位元素的全部。

,

您使用的是react，因此使组件具有所需的样式。如果它是底部没有边距的h1，请这样做，

// styledHeading.module.css
styledHeading {
    margin-bottom: 0
}

// styledHeading.js
import styles from './styleHeading.module.css

// className for additional css classes
const StyledHeading = ({text,className}) => 
    <h1 className={`${styles.styledHeading} ${className}`}>{text}</h1>
antdfrontendhtmlreactjsreactjs