-
Notifications
You must be signed in to change notification settings - Fork 153
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Problem in load css file #213
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
"react": "^18.2.0",
"react-device-detect": "^2.2.3",
Windows 11
Chrome Version 112.0.5615.138 (Official Build) (64-bit)
I use 2 components to display mobile and desktop mode.
desktop view
import React from 'react';
import './ProductDesktopView.css';
const ProductDesktopView = () => {
return (
<>
...
</>
)
}
export default ProductDesktopView;
mobile view
import React from 'react';
import './ProductMobileView.css';
const ProductMobileView= () => {
return (
<>
...
</>
)
}
export default ProductMobileView;
product.js
import React from 'react';
import { BrowserView, MobileView } from 'react-device-detect';
import ProductDesktopView from './Des/ProductDesktopView';
import ProductMobileView from './Mob/ProductMobileView';
const Product = () => {
return (
<>
<BrowserView>
<ProductDesktopView />
</BrowserView>
<MobileView>
<ProductMobileView />
</MobileView>
</>
)
}
export default Product
.
.
PROBLEM
When you are in desktop view, the ProductMobileView.css style file that should be displayed in mobile mode is also loaded, and the ProductDesktopView.css file is also loaded for mobile mode.
https://codesandbox.io/s/serene-spence-rhj9yd
The text was updated successfully, but these errors were encountered: