i have a code like bellow. It works great, but TypeScript show me: Property 'style' does not exist on type 'ChildNode' Type Script. This error

  const allCoins = Array.from(document.querySelectorAll('li')))
  const xs = !useMediaQuery(theme.breakpoints.down('xs'))
  const md = !useMediaQuery(theme.breakpoints.down('sm'))

  allCoins.map((coins) => {
    if (coins.offsetHeight >= 53 && xs && !md) {
      allCoins.map((coin) => {
        coin.childNodes[0].childNodes[2].style.flex = '1 0 100%'
        coin.childNodes[0].childNodes[2].style.marginLeft = '-3px'
      })
    } else {
      allCoins.map((coin) => {
        coin.childNodes[0].childNodes[2].style.flex = 'unset' 
        coin.childNodes[0].childNodes[2].style.marginLeft = '0'
      })
    }
  })

I tried every solution i saw on Stack and Fit, but no one works for me.

CodePudding user response：

This solution, works perfect for me :)

  const allCoins: HTMLElement[] = Array.from(document.querySelectorAll('li'))
  const xs = !useMediaQuery(theme.breakpoints.down('xs'))
  const md = !useMediaQuery(theme.breakpoints.down('sm'))

  allCoins.map((coins) => {
    if (coins.offsetHeight >= 53 && xs && !md) {
      allCoins.map((coin) => {
        (coin.childNodes[0].childNodes[2] as HTMLElement).style.flex = '1 0 100%';
        (coin.childNodes[0].childNodes[2] as HTMLElement).style.marginLeft = '-3px';
      })
    } else {
      allCoins.map((coin) => {
        (coin.childNodes[0].childNodes[2] as HTMLElement).style.flex = 'unset';
        (coin.childNodes[0].childNodes[2] as HTMLElement).style.marginLeft = '0';
      })
    }
  })