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?
parent.tsx
child.tsx
child.module.less
and in
index.module.lesswhich imported in parent.tsx fileIt doesn't work??? why ??? and what should I do?