title: Pass CSS variable as prop to the react component
body: <p>I am having this component that can be displayed in different colors depending on prop color that component received.</p>
  <pre class="lang-js prettyprint-override"><code>const Card = ({color}) =&gt; {
    return (
      &lt;p style={{color}}&gt;Some Text&lt;/p&gt;
    )
  }
  </code></pre>
  <p>I am having these global css variables:</p>
  <pre class="lang-css prettyprint-override"><code>:root{
      --bg-clr-1: #E7F8F8;
      --card-clr-red: #F03E3E;
      --card-clr-violet: #7950F2;
      --card-clr-green: #12B886;
      --text-clr: #333;
  }
  </code></pre>
  <p>Is there a way to pass this css variable as prop to &quot;Card&quot; component? Like so:</p>
  <pre class="lang-js prettyprint-override"><code>import variableStyles from '../../styles/globalVariables.css'
  
  const App = () =&gt; {
    return(
      &lt;Card color={variableStyles['--text-clr']} /&gt;
    )
  }
  </code></pre>