I have a custom component in one file, lets say like that:

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>
    )
}

That component is imported into another file, which has it's own components and css module:

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} />
        </>
    )
}

What I want to happen is that the overrideStyle can be used to add css parameters and/or override some existing ones of the container style. What happens is that new parameters are added, if were not previously defined in the inner style, but already existing ones are not overwritten.

For example, if the CustomComponent css is something like:

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

.inner {
    height: 100px;
    width: 100%;
}

and overrideStyle is something like this:

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

I expected the resulting css properties of the CustomComponent inner div to behave as follows:

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

What I get is:

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

New properties are added, but existing ones are not overwritten.

What rules are there that I don't understand and how can I force the className that is passed through props to supersede the inner one?