Правила стиля, похоже, не применяются к компонентам React, кроме App.js. ⇐ CSS

[Anonymous]

Я пытаюсь настроить простое приложение со списком событий. Используя среду по умолчанию, созданную с помощью npx create-react-app, я настраиваю свой App.js как компонент, содержащий и его , а тег обрабатывается другим компонентом под названием .

Код: Выделить всё

// /src/App.js
import './App.css';
import EventListing from './components/EventListing/EventListing';

function App() {
return (

New Event
All Events



Name
Start
End





);
}

export default App;

Как описано, ` выглядит следующим образом:

Код: Выделить всё

// /src/components/EventListing/EventListing.js
import styles from './EventListing.module.css'

export default function EventListing() {
return (





)
}

function EventRow({ eventName, startDate, endDate }) {
return (

{ eventName }
{ startDate }
{ endDate }

)
}

Как следует из первого оператора импорта EventListing, я пытаюсь использовать модули CSS для отделения таблицы стилей EventListing(.module.css) от таблицы стилей EventListing(.module.css) App, поместив его в /src/comComponents/EventListing, а App.css — в /src/.

Код: Выделить всё

/* /src/App.css */
.main-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 200px 18% 200px 18%;
}

.add-btn {
width: 100px;
height: 30px;
padding: 3px;
}

.event-list {
border: 1px solid red;
}

/* .all-events {
border: 1px solid purple;
} */

Код: Выделить всё

/* /src/components/EventListing/EventListing.module.css */
.allEvents {
border: 1px solid yellow;
}

.eventRow {
border: 1px solid purple;
}

При этой текущей настройке все правила стилей обеих таблиц стилей отображаются в инспекторе, однако фактические стили для EventListing и его дочерних элементов EventRow не отображаются. на странице (желтая и фиолетовая границы соответственно). Более того, правила в App.css применяются безупречно.
[img]https://i.sstatic.net /AkkBbw8J.png[/img]

Это наводит меня на мысль, что эти правила где-то нарушаются, но я не могу понять, где именно. Как правильно разделить эти таблицы стилей?
Я также пробовал использовать обычные таблицы стилей для EventListing, импортировав EventListing.css. Более того, перемещение правил .all-events и event-row в App.css приводит к той же проблеме.

Подробнее здесь: https://stackoverflow.com/questions/787 ... han-app-js