React JS 组件未应用 CSS 边距答案

【问题标题】：React JS component not applying CSS marginReact JS 组件未应用 CSS 边距
【发布时间】：2021-03-18 22:17:48
【问题描述】：

通过 react，我在 Card.jsx 文件中创建了一个非常简单的卡片组件。组件如下所示。

class Card extends React.Component{

  render() {
    return (
      <div className={style.mainContainer}>
        <div className={style.container}>
          <div className={style.title}>Hello world</div>
          <div className={style.value}></div>
        </div>
      </div>
    );
  }
  
}

export default Card

在我的一个网络应用程序页面中，我添加了两张卡片，并用弹性显示将它们隔开。

页面渲染：

function Home() {
    return (
        <div className={style.container}>
            <Card> </Card>
            <Card> </Card>
        </div>
    )
}

容器 CSS：

.container {
    width: 100vw;
    height: 100vh;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

}

此代码的唯一问题是 css 中的 margin-top 没有将边距应用于 div。我多次遇到这个问题，导致我无法使用或填充或边距。有人可以帮忙吗？谢谢。

不受边距影响的组件图像

我发现尝试通过以下代码行重置 React 的默认填充：

* {    
    margin: 0 !important;
    padding: 0 !important;
}

解决了这个问题。尽管如此，如何在不影响应用中所有填充和边距的样式的情况下重置 React 的默认填充/边距？

【问题讨论】：

你确定吗？这似乎是一个应该查看渲染标记的问题。您可能有一个常见的边距崩溃场景。
从重置中删除 !important，或者更糟糕的是，在你的新规则中也使用它:(
您的更新并没有真正改变任何东西。除非我们能看到呈现的 HTML 和应用的样式，否则我不确定我们会如何提供帮助。
而且 React 没有默认样式。您使用的是布局库还是样式库？
React 对 CSS 没有任何作用，如果有额外的边距，它要么是浏览器的默认设置，要么是您包含的某个库。您需要直接定位具有边距的元素，而不是将所有内容归零，例如如果正文有额外的边距，则改为body { margin: 0; }，依此类推。

标签： javascript css reactjs jsx

【解决方案1】：

覆盖很多元素的样式属性（* 选择器）通常是个坏主意。但是，可以覆盖特定标签的用户代理样式表。例如，Chrome 会自动为 <body> 标签添加边距，因此您可以在 React 中不使用 !important 覆盖边距属性我认为。

删除 !important 覆盖后，为您的 Card 组件创建一个单独的容器类。设置单个弹性项目的宽度和高度可能会干扰弹性容器布局，并可能导致边距折叠。

【讨论】：

【解决方案2】：

为容器添加内边距

.container {
    padding: 10px;
}

【讨论】：