mobile viewimport React from 'react';import './ProductMobileView.css';const ProductMobileView= () => {return (<>...</>)}export default ProductMobileView;
product.jsimport 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.
"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