I am trying to setup a simple event list app. Using the default environment created using npx create-react-app, I setup my App.js to be a component that holds a <table> and its <thead>, while the <tbody> tag is handled by another component called <EventListing />.

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

function App() {
  return (
    <main className="main-container">
      <button type="submit" className="add-btn">New Event</button>
      <h1 className="event-list__title">All Events</h1>
      <table className="event-list">
        <thead>
          <tr>
            <th>Name</th>
            <th>Start</th>
            <th>End</th>
          </tr>
        </thead>
        <EventListing />
      </table>
    </main>
  );
}

export default App;

As described, ` is as follows:

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

export default function EventListing() {
  return (
    <tbody className={styles.allEvents}>
      <EventRow eventName="Airsoft Day" startDate="2024-07-06" endDate="2024-07-06" />
      <EventRow eventName="Job Interview" startDate="2024-07-10" endDate="2024-07-10" />
      <EventRow eventName="Workout Session" startDate="2024-07-12" endDate="2024-07-12" />
    </tbody>
  )
}

function EventRow({ eventName, startDate, endDate }) {
  return (
    <tr className={styles.eventRow}>
      <td className="event-row__name">{ eventName }</td>
      <td className="event-row__start">{ startDate }</td>
      <td className="event-row__end">{ endDate }</td>
    </tr>
  )
}

As the first import statement of EventListing suggests, I am trying to use CSS modules to separate the stylesheet of EventListing(.module.css) from that of App, by putting it in /src/components/EventListing, while App.css is under /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;
}

With this current setup, all style rules of both stylesheets show up in the inspector, however the actual styles for EventListing and its children EventRows do not appear on the page (the yellow and purple borders respectively). Furthermore, rules in App.css apply flawlessly.

This leads me to believe that these rules are being overridden somewhere, but I can’t seem to figure out where. How do I properly separate these stylesheets?

I’ve also tried using regular stylesheets for EventListing, by import 'EventListing.css'. Furthermore, moving the .all-events and event-row rules into App.css produces the same problem.