title: React - How to replace the hover color of an Ant-Design Primary button with a css variable?
body: <p>I'm creating an app with React, Redux, Ant-Design, LESS and many other modules.
  I have to fetch the Primary color from the DB and I assign it to a CSS variable (--primary-color). I darken the color and assign it to an other CSS variable (--primary-color-darken). I use CSS variables instead of LESS variables because the LESS variables are hardcoded after the compilation and cannot be changed. I succeed to overwrite the AntD css class with my CSS variable, but with hover class it doesn't work. The browser seems to understand the style correctly but compute the wrong one.</p>
  
  <pre><code>//LESS code
  //Default assigned CSS variables
  :root {
    --primary-color: #EB3052;
    --primary-color-darken: #D62D4C;
    --primary-hover-color: var(--primary-color-darken);
  }
  
  //Default value for Ant-Design
  @primary-color: #EB3052;
  @primary-hover-color: #D62D4C;
  
  //Overwrite the Ant-Design class
  .ant-btn.ant-btn-primary,
  .ant-btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    &amp;:hover {
      background-color: var(--primary-hover-color) !important;
      border-color: var(--primary-hover-color) !important;
    }
  }
  </code></pre>
  
  <p>I reassign variable inline with a wrapper component that wrap all the app content.</p>
  
  <pre><code>[other wrapper]
  &lt;div class="CssVariableApplicator" style="--primary-color:#FFFF22;--primary-color-darken:#e6e61f;" data-reactroot=""&gt;
    [content]
  &lt;/div&gt;
  </code></pre>
  
  <p>Look at the printscreens for the behavior:</p>
  
  <ol>
  <li><p>Styled Primary color correctly: <a href="https://i.stack.imgur.com/RV057.png" rel="nofollow noreferrer">https://i.stack.imgur.com/RV057.png</a></p></li>
  <li><p>Computed Primary colorcorrectly:
  <a href="https://i.stack.imgur.com/h7967.png" rel="nofollow noreferrer">https://i.stack.imgur.com/h7967.png</a></p></li>
  <li><p>Styled Hover Primary color correctly]:
  <a href="https://i.stack.imgur.com/tSWIN.png" rel="nofollow noreferrer">https://i.stack.imgur.com/tSWIN.png</a></p></li>
  <li><p>Computed Hover Primary color incorrectly: <a href="https://i.stack.imgur.com/Ed4e9.png" rel="nofollow noreferrer">https://i.stack.imgur.com/Ed4e9.png</a></p></li>
  </ol>