I am using Next js,I am applying conditional on component which is working,but css style changes between different component.
Code 1:
import React from "react";
import Profile from "../../components/model/Profile";
import { useAuthContext, useAuthUpdateContext } from "../../app/AuthContext"
function profile() {
const user = useAuthContext()
const { updateUser } = useAuthUpdateContext()
return user.isLoggedIn === true && user.user.userType === "Model" ? (
<div>
<Profile />
</div>
) : (
<div className="">
<h1>You are not authorized to view this page</h1>
{/* tw-mx-auto tw-mt-auto tw-font-extrabold tw-capitalize tw-text-3xl */}
</div>
)
}
export default profile;
import React from "react";
import Profile from "../../components/model/Profile";
import { useAuthContext, useAuthUpdateContext } from "../../app/AuthContext"
function profile() {
const user = useAuthContext()
const { updateUser } = useAuthUpdateContext()
return user.isLoggedIn === true && user.user.userType === "Model" ? (
<div>
<Profile />
</div>
) : (
<div className="tw-mx-auto tw-mt-auto tw-font-extrabold tw-capitalize tw-text-3xl"> <-----// Difference is here from code 1
<h1>You are not authorized to view this page</h1>
{/* tw-mx-auto tw-mt-auto tw-font-extrabold tw-capitalize tw-text-3xl */}
</div>
)
}
export default profile;
Components are working as expected but css style not.
If you are using CSS or SCSS modules, you will first have to import the style sheet in the component where you want to use the styles.
So in your example above, you would use something like:
import React from "react";
import Profile from "../../components/model/Profile";
import { useAuthContext, useAuthUpdateContext } from "../../app/AuthContext"
import styles from "../yourPath/../toStyles/stylesheet.module.css"
Don't forget to use "module.scss" if you are using SCSS in your project.
After that, you can treat the imported styles as object in JS code. So something like this in your code above:
<div className={styles.myClass}> <-----// Difference is here from code 1
<h1>You are not authorized to view this page</h1>
{/* tw-mx-auto tw-mt-auto tw-font-extrabold tw-capitalize tw-text-3xl */}
</div>
You can find more info in the official docs -> https://nextjs.org/docs/basic-features/built-in-css-support