title: How to add CSS new 'content-visibility' property to a React class component that uses Typescript and SCSS?
body: <p>I'm trying to add this new released style property - (It's a new css property - you can read about it <a href="https://web.dev/content-visibility/" rel="nofollow noreferrer">here</a>)</p>
  <pre><code>content-visibility: auto;
  contain-intrinsic-size: 1000px;
  </code></pre>
  <p>to a div wrapping some content but getting errors that the property is unknown.
  So far I've tried:</p>
  <ol>
  <li>Adding it to the scss under the right class like so:</li>
  </ol>
  <pre><code>.capWrapper {
    width: 100%;
    margin-bottom: 108px;
    margin-top: 71px;
  
    content-visibility: auto;
    contain-intrinsic-size: 1000px; 
  }
  </code></pre>
  <p>but getting an error:
  <code>Unknown property: 'content-visibility'scss(unknownProperties)</code></p>
  <ol start="2">
  <li>Adding it directly to the element as a style object:</li>
  </ol>
  <pre><code>render() {
      
      const contentVisibilityStyle = {
        contentVisibility: 'auto',
        containIntrinsicSize: '1000px' 
      } as React.CSSProperties;
  
      return (
        &lt;div className={classes[&quot;capWrapper&quot;]} style={{contentVisibilityStyle}}&gt;
          some content
        &lt;/div&gt; 
  
  </code></pre>
  <p>But getting this error:</p>
  <pre><code>Type '{ contentVisibilityStyle: React.CSSProperties; }' is not assignable to type 'CSSProperties'.
    Object literal may only specify known properties, and 'contentVisibilityStyle' does not exist in type 'CSSProperties'.ts(2322)
  index.d.ts(1437, 9): The expected type comes from property 'style' which is declared here on type 'DetailedHTMLProps&lt;HTMLAttributes&lt;HTMLElement&gt;, HTMLElement&gt;'
  </code></pre>
  <p>Any ideas how to implement this property correctly would be very much appreciated.</p>