Импортировано css className не работает на реагировать - PullRequest
Новая
       26

Импортировано css className не работает на реагировать

2 голосов
/ 23 января 2020

Я должен использовать простой css со стилевым компонентом.

Но импортированный css не применяется к компоненту.

Это мой webpack.config.ts 

module: {
    rules: [
      // .ts, .tsx
      {
        test: /\.tsx?$/,
        use: [
          !isProduction && {
            loader: 'babel-loader',
            options: { plugins: ['react-hot-loader/babel'] },
          },
          'ts-loader',
        ].filter(Boolean),
      },
      // css
      {
        test: /\.css$/,
        use: [
          isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
          {
            loader: 'css-loader',
            query: {
              modules: true,
              sourceMap: !isProduction,
              importLoaders: 1,
              localIdentName: isProduction
                ? '[hash:base64:5]'
                : '[local]__[hash:base64:5]',
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('postcss-import')({ addDependencyTo: webpack }),
                require('postcss-url')(),
                require('postcss-preset-env')({
                  /* use stage 2 features (defaults) */
                  stage: 2,
                }),
                require('postcss-reporter')(),
                require('postcss-browser-reporter')({
                  disabled: isProduction,
                }),
              ],
            },
          },
        ],
      },
      // static assets
      { test: /\.html$/, use: 'html-loader' },
      { test: /\.(a?png|svg)$/, use: 'url-loader?limit=10000' },
      {
        test: /\.(jpe?g|gif|bmp|mp3|mp4|ogg|wav|eot|ttf|woff|woff2)$/,
        use: 'file-loader',
      },
    ],
  },

Я импортирую css следующим образом. 

import './chipContainer.css'

import React, { useState } from 'react'

...

И это - chipContainer. css

.chipContainer{
  overflow: scroll;
  min-height: 30px !important;
  max-height: 100px;
}

Затем это подтверждается className на консоли , class = "WAMuiChipInput-standard-422 WAMuiChipInput-chipContainer-420 chipContainer"

Но он не применяется.

css, определенный как элемент в файле css, такой как body {...}, работает нормально, но css, определенный как className, не работает.

в чем проблема?

...