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"?