Tengo un problema al aplicar un módulo CSS a un componente React (en una aplicación creada con 'create-react-app' y usando webpack). Tengo un elemento que tiene un atributo 'className' y 'id'. Se aplica el estilo 'className', pero cuando intento 'anularlo' con un estilo 'id' más específico, no funciona. Mi caso de uso es que la anulación de estilo más específica está en un archivo separado, pero el problema existe con los dos estilos en el mismo archivo CSS.

Aquí está mi componente:

 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;

Así es como se representa el elemento:

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

Aquí está estilos.module.css:

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

¿Hay algo especial que deba hacer para poder anular el 'nombre de clase'?