My navbar component is not displaying the styles correctly as intended. I have a Navbar.module.css file to style it, but after using next-auth for social login, only the buttons remain unstyled while everything else gets styled.
The code snippet for importing the Navbar.module.css file in the navbar component file:
import styleNavbar from '../../../styles/Main/Navbar.module.css'
Here's a snippet of the app file:
import React from 'react';
import { SessionProvider } from "next-auth/react"
import styles from '../styles/tstyles.css'
export default function App({Component,pageProps: { session, ...pageProps },}) {
return (
<SessionProvider className={styles} session={session}>
<div className={styles} >
<Component className={styles} {...pageProps} />
</div>
</SessionProvider>
)
};
The app file imports a tailwind css file with basic styling definitions. The Navbar was previously styled successfully, but now I am facing issues with button styling post-integration of next-auth.
Here's the full code for navbar.js:
import styleNavbar from "../../../styles/Main/Navbar.module.css";
// Rest of the code for Navbar component.
Content of Navbar.module.css file:
{CSS styling code for the navbar}Note: The CSS code provided above was not written by me, and I'm encountering difficulties in getting my navbar styled properly.