I'm having a problem applying a CSS Module to a React Component (in an app created with 'create-react-app' and using webpack). I have an element that has a 'className' and an 'id' attribute. The 'className' style get applied, but when I attempt to 'override' it with a more specific 'id' style, it doesn't take. My Use Case is that the more-specific style override is in a separate file, but the problem exists with the two styles in the same CSS file.

Here's my component:

import React from 'react';
import styles from './styles.module.css'

class QuestionTag extends React.Component {

  render() {

    let c1 = "qumultiline";

    return (
      <>
        <div className={`${styles[c1]}`} id={`${c1}`}>      
          Hello there    
        </div>
      </>
    );    

  }

}

export default QuestionTag;

This is how the element gets rendered:

<div class="styles_qumultiline__iXUv1" id="qumultiline">Hello there</div>

Here's styles.module.css:

.qumultiline {
  background-color: #006699;
  color: white;
}

div#qumultiline {
  background-color: red;
  color: red;
}

Is there something special I need to do to be able to override the 'className'?