Question

我希望我的整个身体背景都是红色。所以我在Javascript公共html文件的index.html文件中添加了这一行：

<link href="%PUBLIC_URL%/styles.css" rel="stylesheet" />

现在，我对放在同一公共目录中的styles.css进行了此操作：

body
{
    background-color: red;
}

所以我观察到的是，当我将样式表链接放在头部时：

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link href="%PUBLIC_URL%/styles.css" rel="stylesheet" />
    <title>React App</title>
  </head>

它加载了背景，但随后突然消失了，但是当我将相同的样式表放在主体底部时，它就会加载。

<body>
<link href="%PUBLIC_URL%/styles.css" rel="stylesheet" />
</body>

有人知道哪个默认事件导致此问题吗？我想通过将样式表保持在顶部来保持背景红色，因为我想在页面开始功能之前完全加载页面。

Answer 1

您正在使用React应用程序中的样式表，这些样式表在声明您的身体颜色的第一个<link>标签之后显示。

如果您在html的底部声明它，则最后将读取它，这意味着它将覆盖所有其他等效样式（以前在react代码中声明）。

如果要强制使用，请使用!important，但正确的方法是将其设置在声明所有其他CSS样式的react代码中。

React组件覆盖了我的样式表

1 个答案: