为什么我的CSS不适用于我的React组件? [英] Why is my CSS not applying to my React components?

问题描述

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

Say I'm creating a React app and have some CSS for components. I've added the style-loader and css-loader to my webpack config here:

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文件，仅用于测试一个组件:

I have a simple CSS file just to test on one component:

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

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

In my app I'm applying the classname to a element in my component and importing my 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.为什么没有应用?

I'm also importing the CSS file in the same way in the ContactList component itself. The rest of the project is here. I would have expected to see an outline around my comtactsList but there is not. There is no CSS when I inspect the page. Why is this not getting applied?

推荐答案

同时查看React组件也会很有帮助.

It would be helpful to see your React component as well.

给出此代码，您是将className作为属性传递给组件，而不是为其分配类:

Given this code, you are passing className as a property into the component rather than assigning a class to it:

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通过.

Inside your component, you would need to use className={this.props.className} on a regular HTML tag inside of your component in order to pass the className through.

这篇关于为什么我的CSS不适用于我的React组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！