在CSS Modules中,使用Less编译器编译并转换成模块化CSS后,你不需要在JavaScript中通过style.xxx
的方式进行嵌套引用。当你在Less文件中使用嵌套语法编写样式时,编译过程会自动将这些嵌套转换为扁平化的类名,并且生成一个映射对象。
例如,在Less文件(假设为styles.module.less
)中:
.container {
color: red;
.item {
background-color: blue;
}
}
编译后,对应的CSS Modules JavaScript对象可能是这样的:
import styles from './styles.module.less';
// styles对象可能类似于:
{
container: 'container__unique-hash',
item: 'container__unique-hash-item__unique-hash'
}
然后在React组件或其他JavaScript代码中引用时,直接使用生成的类名即可:
<div className={styles.container}>
<div className={styles.item}>This is an item</div>
</div>
注意这里的styles.item
并不是styles.container.item
,因为在实际应用中,CSS Modules已经将Less中的嵌套结构扁平化了。