时间戳

首页 > 解决方案 > React JS 组件未应用 CSS 边距

javascript - React JS 组件未应用 CSS 边距

问题描述

通过 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 的默认填充/边距？

在此处输入图像描述

标签： javascriptcssreactjsjsx

解决方案

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

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

推荐阅读