I'm currently facing the task of selecting which CSS file to apply in my next.js project.
I have two separate CSS files, one for desktop and one for mobile devices.
My current method of importing CSS files is as follows:
// _app.tsx
import "../styles/globals.css"; // CSS for desktop
// import "../styles/globals_mobile.css"; // CSS for mobile
function MyApp({ Component, pageProps }: AppProps) {
// ... remaining code
}
Now, I have a mobile CSS styling file, and I have a boolean variable called isMobile which determines whether the device is a desktop or mobile in the AppProps.
However, I am struggling to find a way to import CSS files dynamically.
The following pseudo code is an attempt, though it does not actually work:
// _app.tsx
import pcStyling from "../styles/globals.css"; // This does not actually import the file.
import mobileStyling from "../styles/globals_mobile.css"; // This does not actually import the file.
function MyApp({ Component, pageProps }: AppProps) {
if (pageProps.isMobile) apply mobileStyling;
else apply pcStyling;
// ...
}
Is there a solution that allows me to dynamically choose the CSS file to apply?