Question

说我正在创建一个React应用，并且有一些CSS组件。我在这里的webpack配置中添加了style-loader和css-loader：

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文件。该项目的其余部分为here。我本来希望在comtactsList周围看到一个轮廓，但是没有。检查页面时没有CSS。为什么没有应用？

Answer 1

同时查看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>
    );
  }
}

在组件内部，您需要在组件内部的常规HTML标记上使用className={this.props.className}，以使className通过。

Answer 2

您可以直接将特定的 css 文件添加到 index.js。（像这样import './master.css' )

Answer 3

根据react文档here，可以将className应用于所有DOM常规元素，例如<div>，<a>，...

您的CSS是否可以与常规标签<div className='contactList'>hello</div>配合使用？

Answer 4

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

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

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

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

那也不起作用。

最后，我读了一篇有关将CSS应用于React的7种方法的文章。最好的方法是将 node-sass 安装到我们的项目中，并使用 index.scss （将'./index.scss'导入）到应用程序组件而不是 index.css 。

还有万岁！！！我的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"));

/* --- Mobile First Design --- */ .books{ text-align: center; }; .book{ border: 1px solid #ccc; text-align: center; width: 200px; padding: 1rem; background: #001a6e; color: #fff; margin:auto; }; h2{ text-align: center; } /* --- Adding Media Queries --- */ @media only screen and (min-width: 900px){ .books,.persons{ display:grid; grid-template-columns: 1fr 1fr; } }

要安装node-sass，只需执行npm install node-sass --save 然后，将所有 .css 文件重命名为 .scss ，并使项目正常工作。

package.json 应该添加了 node-sass 依赖项，如下所示：

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

希望这会对许多开发人员有所帮助：）

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

4 个答案: