如果组件位于单独的组件文件夹中，如何使 css 样式表在 reactjs 中工作

Posted 2023-03-07

【中文标题】如果组件位于单独的组件文件夹中，如何使 css 样式表在 reactjs 中工作

【英文标题】：how to make css stylesheet to work in reactjs if components are in seperate component folder

【发布时间】：2018-07-06 21:10:18

【问题描述】：

如何使 index.css 样式表正常工作。我将所有组件放在 src 内的组件文件夹中，它工作正常，但 index.css 似乎不起作用。 我在这里列出所有不同的文件： index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/app';

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

组件内的app.js

import React,  Component  from 'react';

import App1 from './app1';
class App extends Component 
  render() 
    return (
      <div >
        <App1/>
        <App1/>

      </div>
    );
  


export default App;

和组件文件夹中的 app1.js

import React,  Component  from 'react';
class App1 extends Component 
  render() 
    return (
      <div >

        <h1> hello </h1>
      </div>
    );
  


export default App1;

和 index.css

.h1
  font: italic;
  color: red;
    

在我的 app1.js 中，我渲染了一个简单的标题，但它的 css 没有生效。

【问题讨论】：

似乎没问题，我认为您的 webpack 配置中缺少某些内容。请分享模块部分。

het @ArnoldGandarrilas 我使用 create react-app thing .sure 创建了它

在 index.css 中尝试 h1 而不是 .h1 请注意它开头的 .。使用您告诉的点将规则应用于类而不是标记。

@satyajeet jha -- 在过去的几周里，您问了几个问题，但没有接受任何正确答案。如果您的问题已得到解答，请考虑将答案标记为已接受，以便用户知道您的问题已解决。

【参考方案1】：

试试这个：

h1 
  font: italic;
  color: red;

【参考方案2】：

Grzegorz 的回答应该可以解决问题，但我想详细说明原因。

您的 index.css 文件包含一个类名 .h1​​。要将其应用于 html 元素，需要将类添加到元素中。

app1.js：

<h1 className='h1'> hello </h1>

这与普通的旧 HTML/CSS 相同。但是请注意，您需要在反应中使用“className”而不是“class”。 HTML 属性在 jsx 中是驼峰式的。而class是一个保留字。

如果您确实要覆盖 h1 元素的基本样式，则需要删除 .(dot)。

index.css

h1 
  font: italic;
  color: red;