将css导入react js答案

【问题标题】：Importing css into react js将css导入react js
【发布时间】：2020-06-24 12:22:18
【问题描述】：

我正在尝试使用“import '../css/banner.css' 将样式从 .css 文件导入到 react js 文件中，并安装并启用了 css-loader 和 style-loader。它应该是最在 react 中导入 css 的直接和最简单的方法，但样式将不适用。

我试图在不使用样式组件或 jss 等其他库的情况下实现这一目标。

banners.css：

.headerItem{
  width: 20vw;
  float: left;
  background-color: cadetblue;
  margin: auto;
  padding: 3em;
  text-align: center;
}

Header.js

import React ...
import '../css/banners.css'

class Header extends React.Component{
  constructor(){
  }

  render(){
    return (
      <div className={"header"}>
        <HeaderItem/> //shown as an example, has className of "headerItem"
      </div>
    )
  }
}

【问题讨论】：

你的 css 类是 .headerItem 并且你的元素有一个类 .header ?
你应该把它写成 className="headerItem"

标签： reactjs webpack css-loader

【解决方案1】：

试试这个。不要在className中使用{}

<div className="headerItem">
  <SomeChild/> //shown as an example
</div>

【讨论】：

它现在可以在没有{} 的情况下工作。我什么时候使用和不使用花括号？我认为在 jsx 中，html 属性只接受对象。
抱歉，这与大括号无关。看我的回答。
带或不带花括号不会影响将"headerItem" 作为道具传递。 JSX 允许大括号添加用于传递表达式的功能，包括非文字字符串值作为道具。但是在这里，"headerItem" 是一个文字字符串，所以大括号没有区别。旁注：通常会看到 className 的大括号用于向组件动态添加类，通常由组件状态决定。

【解决方案2】：

不要使用花括号，或者最好使用样式组件来赋予 css 属性

【讨论】：

【解决方案3】：

这个问题与在类名周围是否包含大括号无关。我发现在我的webpack.config.js 中，我将“css-loader”中的modules 选项设置为true，这导致css-loader 寻找modules.css 文件而不是.css 文件。将modules 选项更改为false 解决了我的问题。（如果您使用的是 css 模块，请记住将标志设置为正确的值！）

事实上，传递给 React 组件的参数应该总是用大括号括起来，即使你不这样做，编译器也会自动为你添加它们，因为每个参数都被视为一个对象，这然后将被收集并作为道具传递给子组件。

很抱歉提出这样一个琐碎和错误的问题。

【讨论】：

【解决方案4】：

将 CS 包含到您的 React 项目中的最佳和最简单的方法是；

将文件重命名为[FileName].module.css
使用import importedStyles from './[FileName].module.css将其导入您的项目中
通过调用导入的名称来使用它。您要使用的 css 样式。例如importedStyles.bodyStyle

将bannerss.css 重命名为banners.module.css：

.headerItem{
  width: 20vw;
  float: left;
  background-color: cadetblue;
  margin: auto;
  padding: 3em;
  text-align: center;
}
Header.js

将css文件调用到你的项目中并使用；

import React ...
import bannerStyles '../css/banners.module.css'

class Header extends React.Component{
  constructor(){
  }

  render(){
    return (
      <div className={"bannerStyles.header"}>
        <HeaderItem/> //shown as an example, has className of "headerItem"
      </div>
    )
  }
}

这应该可以正常工作并且很容易。

参考：https://www.w3schools.com/react/react_css.asp

让我知道这是否有效！

【讨论】：