how to style child Component when child and parent both use css.module?

Question

I just got some problem about css-module, please check the issue here https://github.com/css-modules/css-modules/issues/408

parent.tsx

import React from 'react';
import {Child} from './Child';
import styles from './index.module.less';

const Parent: React.FC = () => {
    return (
            <Child className={styles.child}></Child>
    );
};

export default Parent;

child.tsx

import React from 'react';
import styles from './child.module.less';
interface ChildProps {
    className?: string;
}

export const Child: React.FC<ChildProps> = (props) => {
    return (
        <div className={props.className}>
            <span className={styles.childP}>123</span>
        </div>
    );
};

child.module.less

.childP {
    color: black;
}

and in index.module.less which imported in parent.tsx file

.child {
    :global {
        .childP{
            color: red;
        }
    }
}

It doesn't work??? why ??? and what should I do?