Блог

Допустим, я создаю приложение React и у меня есть некоторый CSS для компонентов. Я добавил загрузчик стилей и css-загрузчик в свою конфигурацию 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;
}
 

В моем приложении я применяю classname к элементу в моем компоненте и импортирую свой 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)
 

Я также импортирую файл CSS таким же образом в сам компонент ContactList. Остальная часть проекта здесь. Я ожидал бы увидеть контур вокруг моего comtactsList, но его нет. При проверке страницы CSS отсутствует. Почему это не применяется?

В проекте react, созданном с помощью create-react-app или npx create-react-app, у меня также была такая же проблема.

Я импортировал файл index.css в свой компонент приложения, но мои стили не применялись должным образом к моим компонентам React.

Я даже пытался напрямую добавить файл index.css в свой html-файл в общую папку и использовать тег link для ссылки на мой файл index.css (который находится в папке src).

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

Это тоже не сработало.

Наконец, я прочитал статью о 7 способах применения CSS в React. Одним из лучших способов было установить node-sass в наш проект и использовать index.scss (import ‘./index.scss’) в App Component вместо 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"
  },
 

Надеюсь, это поможет многим разработчикам 🙂

Было бы полезно также просмотреть ваш компонент 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.

Вы можете добавить свой конкретный файл css в index.js напрямую. (например, так import './master.css' )

Согласно документации react здесь, className может быть применен ко всем обычным элементам DOM, таким как <div> , <a> , …

Работает ли ваш CSS с обычным тегом <div className='contactList'>hello</div> ?