I have been attempting to incorporate and apply CSS styles from a module to a React component, but the styles are not being applied, and the CSS is not being included at all.
Here is the current code snippet:
./components/Toolbar.tsx
import styles from "./Toolbar.module.css";
export default function Toolbar({title = "Social Media App"}) {
return (
<div className={styles.toolbarContainer}>
<h1>{title}</h1>
</div>
)
}
./components/Toolbar.module.css
.toolbar-container {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 20px;
background: grey;
}
./app/layout.tsx
import type {Metadata} from 'next'
import {Inter} from 'next/font/google'
import React from "react";
import Toolbar from "@/components/Toolbar";
import Homepage from "@/app/page";
const inter = Inter({subsets: ['latin']})
export const metadata: Metadata = {
title: 'Some Social Media App',
description: 'Some new kind of social media outlet'
}
export default function RootLayout({children}: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={inter.className}>
<Toolbar title="Homepage" />
{children}</body>
</html>
)
}
./app/page.tsx
import React from "react";
import Link from "next/link";
export default function Homepage() {
return (
<>
<p>Welcome to the homepage!</p>
<Link href={"/dashboard"}>Dashboard</Link>
</>
)
}
What could be causing the CSS from the Toolbar.module.css file to not be rendered on the page?
I have tried moving the Toolbar around to different locations and files, as well as including it directly in the layout.tsx file, but nothing seems to work.