title: Dynamically override Bootstrap CSS variables in React?
body: <p>So what I have is a React project with <code>Bootstrap.css</code> loaded. I'd like to somehow override the variables, so for instance I have a bunch of buttons like </p>
  
  <p><code>&lt;button className="btn btn-primary"&gt;Hello&lt;/button&gt;</code></p>
  
  <p>Which basically 'inherit' the color from:</p>
  
  <pre><code>:root {
    --primary: somecolor;
  }
  </code></pre>
  
  <p>Is there a way to somehow override this? I've tried passing it in as inline style to components, like <code>&lt;Component style={{"--primary" : "red"}} /&gt;</code> which will override the <code>:root { --primary }</code>, but the button colors will remain the same. What's the easiest way to do this, considering I'm supporting dynamic colors, so I can't create a few CSS files, and it would be good if I didn't have to rewrite every single button I have to be a <code>styled-component</code> that minds props!</p>