I recently started using Next.js and I am in need of a solution to my current problem along with some advice.
Problem:
-When accessing the empty URL (just localhost:8081), a login form is displayed, with an option to switch to the Register component without refreshing or changing the URL. After successfully registering, a message "Successful register" appears for 2.5 seconds before rendering the Login Component for user login. However, when entering the wrong username/password on the Login Component, the text color is blue instead of red as intended due to a CSS conflict between the separate CSS files for the Register and Login components. Both CSS files are imported into their respective Components files.
Page.js file:
"use client"
import React, { useState } from 'react';
import LoginForma from "./components/LoginForma/LoginForma";
import Register from './components/Register/Register';
const Login = () => {
const [showRegistration, setShowRegistration] = useState(false);
const [showLogin, setShowLogin] = useState(false);
// Rest of the code...
The first and second type of users use the same CSS file which works fine, but there seems to be a mix-up between the CSS files of the Login and main Register components despite them being separate.
Tried adding !important after color: red to fix the issue temporarily, but looking for a better solution.
Folder structure:
-Register.jsx connects RegisterSportista.jsx and RegisterVlasnik.jsx. Both Register.jsx and LoginForma.jsx are called in Page.js file.