为什么我的 CSS 不适用于我的 React 组件？

Question

假设我正在创建一个 React 应用程序并且有一些用于组件的 CSS。我已经将 style-loader 和 css-loader 添加到我的 webpack 配置中：

module.exports = {
  mode: 'development',
  entry: './client/index.js',
  module: {
    rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
          loader: 'babel-loader',
          options: { 
            presets: ['@babel/preset-react']
          }
      }
    }, {
      test: /\.css$/,
      loader: 'style-loader'
    }, {
      test: /\.css$/,
      loader: 'css-loader',
      query: {
        modules: true,
        localIdentName: '[name]__[local]___[hash:base64:5]'
      }
    }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  },
  devtool:"#eval-source-map"
};

我有一个简单的 CSS 文件只是为了测试一个组件：

.list-group-item {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: medium;
}

在我的应用程序中，我将类名应用于组件中的元素并导入我的 CSS

import React, { Component } from 'react'
import { connect } from 'react-redux'
import selectContact from '../actions/action_select_contact'
import { bindActionCreators } from 'redux'
import '../styles.css';

class ContactList extends Component {
  renderList() {
    return this.props.contacts.map((contact) => {
      return (
        <li
          key={contact.phone}
          onClick={() => this.props.selectContact(contact)}
          className='list-group-item'>{contact.firstName} {contact.lastName}</li>
      );
    });
  }
  render() {
    return (
      <ul className = 'list-group col-sm-4'>
        {this.renderList()}
      </ul>
    );
  }
}

function mapStateToProps(state) {
  return {
    contacts: state.contacts
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ selectContact: selectContact }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(ContactList)

我也在 ContactList 组件本身中以相同的方式导入 CSS 文件。项目的其余部分在这里。我本来希望在我的 comtactsList 周围看到一个大纲，但没有。当我检查页面时没有 CSS。为什么这没有得到应用？

Answer 1

在使用create-react-app或npx create-react-app 创建的 react 项目中，我也遇到了同样的问题。

我在我的App 组件中导入了index.css文件但我的样式没有正确应用于我的 React 组件。

我什至尝试在公共文件夹中的 html 文件中直接添加index.css文件，并使用链接标记链接到我的 index.css 文件（位于 src 文件夹中）。

<link rel="stylesheet" href="./../src/index.css">

那也没有用。

最后，我读了一篇关于将 CSS 应用到 React 的 7 种方法的文章。一种最好的方法是将node-sass安装到我们的项目中，并在App 组件中使用index.scss ( import './index.scss')而不是index.css。

万岁！！！我的 CSS 工作正常，所有媒体查询开始正常工作。

以下是您可以尝试的代码片段。

<link rel="stylesheet" href="./../src/index.css">

import React from "react";
import ReactDom from "react-dom";
import './index.scss';


// --- Data to work with ---
const books = [
  {
    id: 1,
    name: 'The Rudest Book Ever',
    author: 'Shwetabh Gangwar',
    img: 'https://m.media-amazon.com/images/I/81Rift0ymZL._AC_UY218_.jpg'
  },
  {
    id: 2,
    name: 'The Rudest Book Ever',
    author: 'Shwetabh Gangwar',
    img: 'https://m.media-amazon.com/images/I/81Rift0ymZL._AC_UY218_.jpg'
  },
  {
    id: 3,
    name: 'The Rudest Book Ever',
    author: 'Shwetabh Gangwar',
    img: 'https://m.media-amazon.com/images/I/81Rift0ymZL._AC_UY218_.jpg'
  },
  {
    id: 4,
    name: 'The Rudest Book Ever',
    author: 'Shwetabh Gangwar',
    img: 'https://m.media-amazon.com/images/I/81Rift0ymZL._AC_UY218_.jpg'
  },
];


const Book = ({ book }) => {
  return (
    <div className={"book"}>

      <img src={book.img} alt="book image" />

      <h3>{book.name}</h3>
      <p>{book.author}</p>
    </div>
  )
};

const Books = () => {
  return (
    <main className={"books"}>
      {
        books.map(book => {
          return (<Book book={book} key={book.id} />)
        })
      }
    </main>
  )
};


// Work a bit fast | one step at a time
const App = () => {
  return (
    <main>
      <h2>Books</h2>
      <Books />
    </main>
  )
}

ReactDom.render(<App />, document.getElementById("root"));

要安装 node-sass，简单做 npm install node-sass --save 然后用.scss重命名所有.css文件，并且您的项目正常工作。

所述的package.json应具有节点SASS加入依赖性如下图所示：

 "dependencies": {
    "node-sass": "^4.14.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-scripts": "2.1.5"
  },

希望这会帮助许多开发人员:)

Answer 2

查看您的 React 组件也会很有帮助。

给出这段代码，您将 className 作为属性传递到组件中，而不是为其分配一个类：

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  render() {
    return (
      <div>
        /** This line specifically **/
        <ContactList className="contactList" />
        <ContactDetail />
        <AddContactModal />
      </div>
    );
  }
}

在组件内部，您需要使用className={this.props.className}组件内部的常规 HTML 标记才能传递 className。

Answer 3

根据此处的反应文档，className 可以应用于所有 DOM 常规元素，例如<div>, <a>, ...

你的 CSS 可以与常规标签一起使用吗<div className='contactList'>hello</div>？