如何使外部自定义CSS（style.css）与react组件一起使用？

时间：2018-08-23 07:18:52

标签： css reactjs


我正在进行一个项目，在几个部分中，我需要放置样式。 Bootstrap运行正常。但是当我添加style.css时，它似乎并没有赶上。

我已经检查了页面源，并且style.css文件已正确链接到我的index.html文件。

我的文件结构：
enter image description here

这是我的index.html

的标头 
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="%PUBLIC_URL%/style.css">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>News Scroller</title>
  </head>

2 个答案:

答案 0 :(得分：0)

这取决于您的Webpack在编译时会创建什么？您现在如何甚至将自己的react组件放入index.html中？

似乎这些还不存在。这几件事需要做：

  1. 您的react application is mounted
    2. 应该有一个div
  2. 您的index.html不应直接引用styles.css。通常是imported in your App.js or `Index.js，具体取决于您的命名

答案 1 :(得分：0)

在style.css文件中，我写的CSS选择器不正确。

我之前写过这篇文章：.input-group .input-group-sm .col-md-3 无法选择className。
取而代之的是，我在类名和CSS规则之间替换了“”。

相关问题
最新问题