React NativeでCSSが反映されない

Question

Reactで写真共有兼検索プログラムを制作中にCSSを制御してみようとしたのですが、
反映されません。

方法はCSS-loaderを使ってみて、webpack-dev-serverもnpm startも正常に動いていますが、ロード時にJSXのclassNameが何も表示されていない状態です。

参考ページはここなどです。
ReactでCSSを使う
ここに記載されているプラグインは全部インストールしています。

使用環境

• Apache 2.4.6
• npm: 6.14.6

採用しているReactの記法はクラスコンポーネントです。現在は、CSSのデザイン制御以外は正常に動作しています。

ソースコード

メインのJSX

import React from "react";
import City from '../../json/city.json';
import State from '../../json/state.json';
import styles from './style.css';

export default class Main extends React.Component {
	//定義
	constructor(){
		super();
		this.state = {
			countries:[
				{id:1,ab:"US",name:"United States"},
				{id:2,ab:"JP",name:"Japan"},
				{id:3,ab:"CN",name:"China"},
			],
			states:State,
			cities:City,
			word: "",　//プロパティの定義
			selectCountry: "",
			selectState: "",
			searchWord: "",
			li_data: [],
			hits: []
		};
		this.optionCountry = this.state.countries.map((item)=>
			<option key={item.id.toString()} value={item.ab}>{item.name}</option>
		);
		//リアクティブ制御
		this.selectCountry = this.selectCountry.bind(this); //リアクティブにさせる定義
		this.selectState = this.selectState.bind(this); //リアクティブにさせる定義
		this.searchWord = this.searchWord.bind(this);
	}
	
	//国名を選択
	selectCountry(elem){
		const cities = this.state.cities
		this.setState({ selectCountry: elem.target.value });
		const hits = cities.filter((item,key)=>{
			console.log(item)
			console.log(elem.target.value)
			console.log(item.state)
			return item.state == elem.target.value
		})
		this.setState({hits: hits})
	}
	//エリアを選択
	selectState(elem){
		const cities = this.state.cities
		const hits = cities.filter((item,key)=>{
			console.log(elem.target.value)
			console.log(item.state)
			return item.state == elem.target.value
		})
		this.setState({hits: hits})
	}
	//フリーワード検索
	searchWord(e){
		const word = e.target.value
		const cities = this.state.cities
		const hits = cities.filter((item,key)=>{
			return item.name.includes(word)
		})
		this.setState({hits: hits})
	}
	clear(){
		//this.selectCountry( null)
	}
	
	
	
	//レンダリングを行う記述
  render() {
    return (			
      <>
				<label> 国の選択 </label>
				<select onChange={this.selectCountry} >
					<option >-- 国名を選択 --</option>
					{this.optionCountry}
				</select>
				<label> エリアの選択</label>
				<select onChange={this.selectState} >
					<option >-- エリアを選択 --</option>
					{
						this.state.states.map((item,key)=>{
							if(item.country == this.state.selectCountry){
									return (
										<option key={item.id} value={item.code}>
											{item.name}
										</option>
									)
							}
						})
					}
				</select>
					<br/>
				<h4>検索文字を入力してください</h4>
				<input type="text" onChange={ this.searchWord} />
				<button onClick={ this.clear }>clear</button>
				<div>ヒット数：{this.state.hits.length}件</div>
			　　<ul className={styles.ulDatas}>
					{
						this.state.hits.map((item,key)=>{
								return(
						　　　　<li className={styles.liData} key={item.id}>
								　　　　<label className={styles.lbHit}>{ item.name }</label>
			　　　　					<br />
						　　　　		<img className={styles.imageStyle} src={`../../img/${item.src}`} alt={ item.name } />
							　　　　</li>
								)
						})		
					}
			　　</ul>

			</>
    );
  }
}

.ulDatas{
	width: 800px;
	display: block;
	margin: 0px;
}
.liData{
	width: 198px;
	height: 198px;
	display: inline-block;
	vertical-align: top;
	border: 1px brown solid;
	border-radius: 0 0 10px 0;
	margin: 5px;
}
.imageStyle{
	max-width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}
.lbHit{
	background-color: black;
	color: white;
	font-weight: bold;
	padding: 1px 0 1px 2px;
	width: 196px;
	height: 22px;
	display: block;
}

webpack.config.js （使用しているバージョンは4.3）

//一部抜粋
  module: {
    rules: [{
      test: /.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env']
          }
        }]
      },
      {
        test: /.css$/,
        use: [
          {
            loader: 'css-loader',
            options :{
              modules : true
            }
          },
        ],
      },

やってみたこと

• cssファイルをディレクトリ直下からcomponentsと同階層に
• style.cssに記載したクラス名称をキャメルケースに変更
• サーバの再起動

根本的な問題なのか、JSXの中に何もクラス名が記載されていないままとなっており、解決の糸口が見えていないので助言いただけたらと思います。

Answer 1

npm startで起動した場合は
オブジェクトリテラルにせず、そのままクラス名指定を明示すれば解決しました。
もし、オブジェクトリテラルにすると何も読み込みません。

<ul className="ulDatas">
                    {
                        this.state.hits.map((item,key)=>{
                                return(
                        　　　　<li className="liData" key={item.id}>
                                　　　　<label className="lbHit">{ item.name }</label>
            　　　　                    <br />
                        　　　　        <img className="imageStyle" src={`../../img/${item.src}`} alt={ item.name } />
                            　　　　</li>
                                )
                        })        
                    }
            　　</ul>

ただし、cssファイルのインポートは必須のようです。