首页 > 其他分享 >css Module里less里嵌套css,使用的时候,style.xxx不用嵌套吗?

css Module里less里嵌套css,使用的时候,style.xxx不用嵌套吗?

时间:2024-03-04 19:23:37浏览次数:25  
标签:styles style container item less 嵌套 css

在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中的嵌套结构扁平化了。

标签:styles,style,container,item,less,嵌套,css
From: https://www.cnblogs.com/longmo666/p/18052452

相关文章

  • 有一个子组件DataList,然后在父组件中引入,并在父组件引入中的DataList标签上设置style
    有一个子组件DataList,然后在父组件中引入,并在父组件引入中的DataList标签上设置style样式,能生效吗?在React中,父组件可以通过props将样式传递给子组件,并在子组件内部应用这些样式。但直接在父组件引用子组件的地方设置style属性通常不会生效,因为React的JSX语法并不支持这种写法。......
  • 深度复制:C# 中 List 与 List 多层嵌套不改变原值的实现方法
     概述:以上内容详细介绍了在C#中实现不改变原List值的多层嵌套复制方法,包括使用AutoMapper、Json.NET、以及对象序列化的步骤和示例。这些方法提供了灵活而高效的方式,可以根据项目需求选择最适合的深度复制方式。1.使用AutoMapper进行多层嵌套复制AutoMapper是一个......
  • 使用 CSS 如何禁用浏览器打印页面 All In One
    使用CSS如何禁用浏览器打印页面AllInOneprint.css禁用PDF导出网页有时,你的网站或应用程序可能希望改善用户在打印内容时的体验。有几种可能的情况:你希望根据纸张的大小和形状调整布局。你希望使用不同的样式来增强纸上内容的外观。你希望使用更高分辨率的图像以......
  • 介绍几个scss 与css 中的新的特性
    介绍几个scss与css中的新的特性css中的@layer。用法如下@layerlow,high;@layerlow{.btn{font-Size:10px;}}@layerhigh{.btn{font-Size:11px;}}@layer{.btn{font-Size:12px;}}.btn{font-Size:1......
  • Vue给iframe设置嵌套页面的宽高
    Vue给iframe设置嵌套页面的宽高,代码示例如下:<template><iframeid="iframe":height="scrollHeight":width="scrollWidth"frameborder=0allowfullscreen="true"src="/docs-html/xxx.html"ref="iframe&......
  • Vue 3.0 Class与Style绑定
    操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js做了专门的增强。表达式结果的类型......
  • Vue Router系列之(四)嵌套路由
    嵌套(多级)路由展示区中包含了新的导航区和展示区配置路由规则,使用children配置项:routes:[ //routes中直接配置的是一级路由 { path:'/about', component:About, }, { path:'/home', component:Home, children:[//通过children配置子级路由 { path:'n......
  • 常用css两列布局汇总
    浮动+margin<divclass="container"><divclass="left">定宽</div><divclass="right">自适应</div></div>/*不给高度不行,不给宽度可以自适应*/.container{height:300px;}.left{float:left;/*......
  • CSS内联样式,内部样式表,外部样式表
    1.内联样式 直接在标签添加样式<h1style="text-align:center;">内容</h1>2.内部样式表在head标签里面定义<head><styletype="text/css">h1{text-align:center;}</style></head>3.外部样......
  • CSS流动布局-页面自适应
    项目中经常会碰到页面自适应的问题,例如:商城的列表展示、分类列表展示等页面,如下:该页面会随着页面的放大缩小而随之发生变化,解决方法:display:flex;配合子元素的动态宽度来实现,子元素的宽度=(总宽-自身的margin)/每行的数量即可。.box{border:1pxsolidred;widt......