<div id="readability-page-1" class="page"><div x-data="{ sidebar: false }">
        <main id="main">
          
          
                
          
  
    
  
  
  

          
      
          
          
          
          
        </main>
        
        <div x-data="top" @scroll.window="toggle" x-show="open" x-transition:enter="transition ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
          <p><img @click="sidebar = ! sidebar" data-src="https://tistory1.daumcdn.net/tistory/1801492/attach/35d4836dcdbd4d8bbd9eca83ae37ebeb" data-sizes="auto" alt="zineeworld" width="36" height="36"></p>
          <div>
            <p>[Warning] Type '{'--box-gap: string;}' has no properties in common with type 'Properties&lt;string | number, string &amp; {}&gt;'.</p>
          </div>
          
        </div>
        
      </div></div>

zineeworld

리액트 컴포넌트에서 받은 숫자값을 CSS 변수로 지정하고 싶은데,
style={{'--box-gap': `${gap}`px}​
 
이렇게 넣으니, Warning이 떴다.
 
 
해결책은 as React.CSSProperties를 넣어주면 된다.
style={{'--box-gap': `${gap}`px} as React.CSSProperties}

[Warning] Type '{'--box-gap: string;}' has no properties in common with type 'Properties<string | number, string & {}>'.

댓글