How to reset/remove styling from an element?

[muuvmuuv]

🤓 Question

Is it possible to remove the styling from an element at a later point? I'm animating a mobile navigation which should only animate below viewport width X and all above should remove the styling so the desktop nav doesn't get props like width: 0.

 const [navStyles, updateNavStyles, stopNavAnimation] = useSpring(() => ({ config: config.stiff, })) const openNav = () => { setVisibility(true) stopNavAnimation() updateNavStyles({ from: { visibility: 'hidden', opacity: 0, width: 0, height: 0, }, to: [ { visibility: 'visible' }, { opacity: 1, width: Math.round(width), height: Math.round(height), }, ], }) } const closeNav = () => { setVisibility(false) stopNavAnimation() updateNavStyles({ from: { visibility: 'visible', opacity: 1, width: Math.round(width), height: Math.round(height), }, to: [ { opacity: 0, width: 0, height: 0, }, { visibility: 'hidden' }, ], }) } const resetNav = () => { setVisibility(true) stopNavAnimation() updateNavStyles() } const toggleNav = () => { if (!visible) { openNav() } else { closeNav() } } const onResize = (bound) => { if (bound.width < 768) { console.log('MOBILE') setMobile(true) if (visible) { closeNav() } } else { console.log('DESKTOP') setMobile(false) resetNav() } }

[krispya]

There are simple ways to do this with JS: https://stackoverflow.com/questions/1229688/how-can-i-erase-all-inline-styles-with-javascript-and-leave-only-the-styles-spec

But given that you have a desktop and mobile menu with different interactions I suggest making them separate components entirely and conditionally rendering them based on the viewport width.

[muuvmuuv]

Thank you! I already thought about creating two different Navs but this would increase the bundle size and is in my opinion not necessary but do you have an example or resource I could look at about "conditionally rendering them based on the viewport width"?