css - 在 create-react-app 中更改 App.css 不影响页面

标签 css reactjs

我的 React index.js,我使用了一个 create-react-app 启动元素。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

我的 app.js 包括:

导入'./App.css';

我使用 CSS:

.body {
  background-color: "green"
}

并且主体不会变为绿色。

如何修改 CSS?我还尝试将 app.css 放入 public/app.css 并加载链接 rel="stylesheet"元素检查器仍然显示没有效果。

元素检查器显示来自“用户代理样式表”的 body 元素上有 8px 的边距。我加载的 css 中没有任何内容。

编辑:

我也尝试内联样式标签:

<!doctype html>
<html lang="en">
<script src="web3.js"></script>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>CryptoClicker</title>
  </head>
  <body>
    <div id="root"></div>

  </body>
  <style>
  .body {
    background: "green";
  }
  </style>
</html>

没有效果。

最佳答案

您正在使用 .body它正在寻找具有“body”类的元素 - 因为有一个 .将其更改为 body (没有 . )并且它将为 body 元素而不是类设置样式。

此外,CSS 中的命名颜色不是可变字符串 - 因此请删除引号:

body {
  background: green;
}

值得将您的样式放回 App.css 并在 JS 中导入它,而不是使用 <style>标签。

关于css - 在 create-react-app 中更改 App.css 不影响页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48493261/

相关文章:

reactjs - React Hooks 的提前返回问题

javascript - React 中 setState 处理程序的问题

reactjs - react 导航变量标签宽度

javascript - react : Generate and save PDF onClick() problem - Kendo

css - 样式化父元素 CSS

css - HTML5 - 可滚动的 Div 容器,其中包含部分固定的 div

html - 防止固定元素重叠

javascript - 显示全宽垂直导航项

javascript - 错误 : Attempting to set key on an object that is immutable and has been frozen

javascript - swiper.js - 幻灯片更改时的幻灯片 CSS 动画问题