Tengo un componente personalizado en un archivo, digamos así:

 import styles from './CustomComponent.module.css' export default CustomComponent = ({className, onClick, text, ...props}) => { return ( <div className={styles.outer}> <div className={`${styles.inner} ${className}`}>{text}</div> </div> ) }

Ese componente se importa a otro archivo, que tiene sus propios componentes y módulo css:

 import styles from './ParentComponent.module.css' import CustomComponent from '../CustomComponent/CustomComponent.component.js' export default ParentComponent = () => { return ( <> This is an example. <CustomComponent text='Example' className={styles.overrideStyle} /> </> ) }

Lo que quiero que suceda es que overrideStyle se pueda usar para agregar parámetros css y/o anular algunos existentes del estilo del contenedor. Lo que ocurre es que se añaden nuevos parámetros, si no estaban previamente definidos en el estilo interior, pero no se sobrescriben los ya existentes.

Por ejemplo, si el css de CustomComponent es algo como:

 .outer { width: 100%; padding-top: 20px; } .inner { height: 100px; width: 100%; }

y overrideStyle es algo como esto:

 .overrideStyle { height: 500px; padding: 20px; }

Esperaba que las propiedades css resultantes del div interno CustomComponent se comportaran de la siguiente manera:

 .(combined) { height: 500px; width: 100%; padding: 20px; }

Lo que obtengo es:

 .(combined){ height: 100px; width: 100%; padding: 20px; }

Se agregan nuevas propiedades, pero las existentes no se sobrescriben.

¿Qué reglas hay que no entiendo y cómo puedo forzar el className que se pasa a través de accesorios para reemplazar el interno?