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

[wine-fall]

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?

[fisschl]

The classes in the child.module.less file will be hashed to avoid conflicts.
So childP in both files is not the same class.
Maybe you can move these classes into the same file and remove :global.