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 EventRow
s 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.