Imported css by className is not worked on react - css

Question

I should use simple css with styled-component.
But, imported css is not applied to component.
It is my 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',
},
],
},
I am importing css like this.
import './chipContainer.css'
import React, { useState } from 'react'
...
And, it is chipContainer.css
.chipContainer{
overflow: scroll;
min-height: 30px !important;
max-height: 100px;
}
Then, it is confirmed className on console.
class="WAMuiChipInput-standard-422 WAMuiChipInput-chipContainer-420 chipContainer"
But, it is not applied.
css defined as an element in the css file, such as body {...}, works fine, but css defined as className does not work.
what is the problem?