首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在material ui中使用sass like插值来获得类似BEM的类名

在Material UI中使用Sass Like插值来获得类似BEM的类名是通过使用CSS-in-JS库的功能来实现的。CSS-in-JS是一种将CSS样式直接编写在JavaScript中的方法,它可以让我们在React项目中轻松地管理和使用样式。

Material UI是一个流行的React UI组件库,它提供了一系列现成的UI组件,让我们可以快速构建漂亮的用户界面。在Material UI中,我们可以使用Sass Like插值语法来生成类似BEM的类名,以应对更复杂的样式需求。

BEM(Block Element Modifier)是一种CSS命名约定,用于帮助我们更好地组织和管理CSS样式。它通过使用块、元素和修饰符来描述DOM结构,并且通过类名的嵌套关系来表达这种结构。使用BEM可以避免CSS选择器的层级过深和样式冲突的问题。

在Material UI中,我们可以使用Sass Like插值语法来生成类似BEM的类名。例如,我们可以使用${theme => theme.palette.primary.main}这样的插值语法来动态生成一个类似myComponent--primary的类名。这样可以让我们更灵活地控制样式,同时保持代码的可维护性。

推荐的腾讯云相关产品:无

以上是关于在Material UI中使用Sass Like插值来获得类似BEM的类名的完善且全面的答案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 您知道SASS吗?

    特别是当您遵循BEM体系架构 时特别有用,因为Sass与它的体系结构非常兼容,因此他们在文档中经常提到它。 它是一种更优雅、更酷的UI设计方式。使用Sass构建CSS也更加容易。...现在如果你用sass来做这件事,它看起来是这样的: 上面的示例展示了SASS如何通过使用(&)将CSS选择器串联在({})中来嵌套几个选择器。...如果您使用的是BEM体系结构,那么您就节省了一些需要重复输入CSS类和选择器来遵循该体系结构时间,因为SASS在后台已经帮您生成了完整的CSS了。...您可以使用Mixins将CSS代码段重用到其他选择器 您不仅可以轻松地用更少的代码嵌套CSS选择器,而且可以重用一些代码片段来解决整个UI中的某些CSS问题。 Mixins可以帮助您做到这一点。...这样,您可以避免在HTML元素中过多使用非语义的类。 举个例子,您在将UI居中对齐时遇到了问题,而且您不想在每个CSS选择器中都写一遍一模一样的代码。在这种情况下,您可以使用Mixins来解决问题。

    92010

    27. 精读《css-in-js 杀鸡用牛刀》

    在明确风格的情况下,可以先把此风格的基色确定下来,无论是抽成 sass 变量还是 js 变量,都具有可复用性。...比如我们抽出一个公共样式包,业务代码中的色值都从此样式包中引用,那么在不同的环境下,公共样式包可能通过所在宿主环境的判断,返回给业务代码不同的色值,甚至与宿主环境配合,从宿主环境拿到注入的颜色,实现一套代码在运行时轻松换肤...我觉得这是一种误解,在 css-in-js 模式中,通过全局合理的设计,使用 js 文件存放颜色变量、公共方法、可能会复用的 css 代码块,其复用能力远大于 sass。...命名规则 对这 5 种类别,在命名时要加上对应前缀,分别是: Base 属于基础元素,比如 div p,不需要命名 Layout 使用 .l- 或 .layout-前缀 Module 使用模块名命名,比如文章区块就叫...Components – 对组件样式的定义,一个 UI 元素基本由 Objects 与 Components 组成 Utilities – 工具类,比如 .hidden ITCSS 的分层是非常有借鉴意义的

    74820

    awesome-css-cn命名习惯和方式参考其他资源原文链接

    官网 PCSS:一个用Python语言编写的CSS预处理器。官网 PostCSS:通过JS插件来转换CSS。PostCSS Sass:成熟、稳定且强力的专业CSS扩展语言。...强力的、可扩展的、基于Sass的、采用BEM命名的面向对象CSS框架 官网 Foundation:一个高级响应式前端框架。...官网 Material Design Lite:很好的用于制作Material Design风格网站的框架。官网 Materialize:基于Material Design的现代响应式前端框架。...官网 Semantic UI:使用人性化html的强力框架。官网 Skeleton:一个超简单的响应式模板。官网 UIkit:适用于手机、平板以及电脑端的栅格系统。...Maxime Thirouin:前端工程师,自由职业者,UI/UX开发者。 Mark Otto:在GitHub和Bootstrap工作,曾就职于Twitter,超级书呆子。

    1.1K80

    20个为前端开发者准备的文档和指南4

    它也提供一种选择,即通过使用一对iframe标签来把输出的结果嵌入到你想要嵌入的地方。 3....在视频里看看效果,看看主要事件的效果和属性值的变化。” 5. Excess XSS(攻克XSS) XSS介绍链接地址: http://baike.sogou.com/v625072.htm?...Get BEM 它是一个综合的站点,旨在推广和教导开发者使用流行的BEM CSS方法学。...,是因为在制作一个动态的UI元素时,有一些重要的好的经验可以应用到自己的项目上。...The CSS at… 如果你想用一些大神制作的CSS样式指南充实自己,那么在本站点中,Chris Coyier已经把去年几个月里不同的帖子根据统计趋势排了名,并且把它们的相关信息和链接都放到了一张表格里

    878100

    科普 | 一文详解 CSS-in-JS

    当 JSS 将 JSON 表示形式编译为 CSS 时,默认情况下会生成唯一的类名。 动态浏览器私有化前缀,使用 CSS-in-JS 可以避免臃肿的 CSS 代码。...UI 库 material-ui 是笔者很早关注的一个 material design 的一个开源 UI 组件库,用过 ReactJS 的开发同学可能有了解过,记得一开始官方采用的是内联样式,后续研发了自己的一套...CSS-in-JS 的实现方案,单独发布了 Material-UI 组件中使用的样式方案 —— @material-ui/styles。...现在也可以使用 “Constructable Stylesheets” 编辑在 JavaScript 中动态添加的样式。 可构造样式表是使用 Shadow DOM 时创建和修改样式的一种新的方法。...笔者因早前开发过自己的一套 React UI 库 React-UWP,也基于这套 UI 库做了 CSS-in-JS 的方案,在过去两年中在开发中虽然用的组件不是很多,但是用了 CSS-in-JS 来做整体的样式解决方案

    3.1K20

    React 设计模式 0x4:样式

    学习如何轻松构建可伸缩的 React 应用程序:样式 # 组件样式 在每个 Web 应用程序中,样式化非常重要,因为样式使其对用户非常有吸引力,并为用户提供良好的体验。...在 React 中有不同的方法来实现这一点。 # 样式化类型 在 React 和网站或 Web 应用程序中,有不同的样式化应用程序的方式。...这里将使用示例来介绍其中一些: 内联 CSS 外部/引用 CSS Sass Bootstrap styled-components Tailwind # 内联 CSS 内联 CSS 是直接在 HTML...# Sass Sass(Synthetically Awesome Style Sheet)是一种预处理器,具有扩展名 .scss,有一些很棒的功能,例如: Mixins(混入) Inheritance...Tailwind CSS 是一种实用型优先的框架,使用一种称为“原子类”的方法,通过提供大量的预定义类来帮助构建定制的、响应式的 UI 组件和页面。

    1.3K20

    CSS模块化的演进

    一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器 没有变量和合理的样式复用机制...BEM BEM 即Block Element Modifier;类名命名规则: Block__Element—Modifier Block 所属组件名称 Element 组件内元素名称 Modifier...BEM通过简单的块、元素、修饰符的约束规则确保类名的唯一,同时将类选择器的语义化提升了一个新的高度。...CSS IN JS 这个理念是由 Facebook 工程师 vjeux 在一次分享中提出的,用来解决在 React 中使用 CSS 的问题。...从开发体验上来看,这种做法让开发者不必在类名的命名上小心翼翼,直接使用随机编译生成唯一标识即可。

    1.7K20

    怎样才能写出更好的 CSS

    如果你想了解更多信息,请查看相应的文档 戳这里。文档写得很好,且易于理解。 2. 组织 CSS 代码:BEM 方法论 我记不清曾经多少次在CSS类中使用包揽一切的名字了。...BEM 的时候,你可以用且只能用类来命名。...它的值可以是:嵌套、展开、紧凑、压缩。我们将使用它来构建你的CSS文件。 如果你是一个好奇心很重的人(我希望如此,因为开发人员应该好奇!)那么,请点击这里查看 完整的文档。...它是一个工具(尤其是postcss插件),它可以解析CSS,并利用这些值(https://caniuse.com/)将提供商的前缀加入到CSS规则中。...这就是为什么我们需要自动前缀来帮助我们的CSS代码获得浏览器的兼容,而不用增加额外的复杂性。 那么我们如何用更聪明地构建CSS呢? 将所有的SCSS文件编译成一个主CSS文件。

    1.7K10

    团队分享,Bem规范调研及实践

    背景 最近老大在维护别人的代码时,发现我们团队写的样式各有种的想法及风格,这在后续维护会增加一定的难度,所以老大决定统一样式的会名规范,所以就安排我去调研及实践,下面是我调研的结果。...在 css 定义时,也必须依靠层级选择器来限定约束作用域,以避免跨组件的样式污染。...这有悖BEM命名规范,BEM的命名中只包含三个部分,元素名只占其中一部分,所以不能出现多个元素名的情况。这样的约定可以防止当层级很深命名过长的问题。...,上面在 less 或 sass 中可以改成如下结构: .card{ // 省略......{vue,css,less,sass,scss}": "stylelint --fix" }, } 这里涉及到 husky 的使用,如果不懂的,可以自行谷歌了解理详细的信息。

    81410

    CSS Modules入门教程

    的渲染规则可以参看这篇文章探究 CSS 解析原理 会带来代码的冗余 由于CSS不能使用类似于js的模块化的功能,可能你在一个css文件中写了一个公共的样式类,而你在另外一个css也需要这样一个样式,这时候...,因此确保了类名的唯一性,我们再看看浏览器中inspector中的样式应用,如下: ?...全局作用域 要想一个类名不需要被装换,那么可以使用:global(className)来进行包装,这样的类不会被转换,会被原样输出,下面我们修改global.css /* global.css */ *...就可以发现.container类没有被转换 定义哈希类名 CSS Modules默认是以[hash:base64]来进行类名转换的,可辨识度不高,因此我们需要自定义 开启自定义,可以使用一个配置参数localIdentName...类名组合 如果我们实现类似于Sass的继承功能,我们需要怎么做呢?

    2.6K40

    CSS工程化

    解决类名冲突 一些第三方机构提出了一些方案来解决该问题,常见的解决方案如下: 「命名约定」 就是提供一种命名的标准,来解决冲突,常见的标准有: BEM OOCSS AMCSS SMACSS 其他 我主要以...等)搭建工程 构建工具允许将css样式切分为更加精细的模块 同JS的变量一样,每个css模块文件中难以出现冲突的类名,冲突的类名往往发生在不同的css模块文件中 只需要保证构建工具在合并样式代码后不会出现类名冲突即可...由于hash值是根据模块路径和类名生成的,因此,不同的css模块,哪怕具有相同的类名,转换后的hash值也不一样。...为了解决这个问题,css-loader会导出原类名和最终类名的对应关系,该关系是通过一个对象描述的 这样一来,我们就可以在js代码中获取到css模块导出的结果,从而应用类名了 style-loader...中书写属性集,类似于LESS中的混入,可以利用CSS的新语法定义一个CSS代码片段,然后在需要的时候应用它。

    87931

    css模块化及CSS Modules使用详解

    无法共享变量 复杂组件要使用 JS 和 CSS 来共同处理样式,就会造成有些变量在 JS 和 CSS 中冗余,Sass/PostCSS/CSS 等都不提供跨 JS 和 CSS 共享变量这种能力。..., } CSS Modules 对 CSS 中的 class 名都做了处理,使用对象来保存原 class 和混淆后 class 的对应关系。...BEM 把样式名分为 3 个级别,分别是: Block:对应模块名,如 Dialog Element:对应模块中的节点名 Confirm Button Modifier:对应节点相关的状态,如 disabled...没问题,这些同名 class 编译后虽然可能是随机码,但仍是同名的。 如果我在 style 文件中使用了 id 选择器,伪类,标签选择器等呢?...CSS Modules 结合 React 实践 在 className 处直接使用 css 中 class 名即可。

    6.9K100

    VScode常用插件_AE必备插件

    这篇博客主要是我使用vscode过程中的插件汇总,使用了这么长时间,总想有个总结,也方便日后查看,这里我将我使用的插件分为基础、框架、工具三个类型。...框架插件 这部分插件主要是和各个框架有关的插件,比如jquery,bootstrap,vue等ui框架,html模板引擎和js框架。...插件地址 if for 插值 … jQuery Code Snippets 虽然jQuery诞生于2006年,距今已有13年历史,但是还是有很多人在使用,所以也推荐一下。...插件地址 工具插件 这部分插件主要是日常工作过程中的一些工程化编译,构建还有辅助等工具,辅助编程。...插件地址 Sass Lint 这个是和sass配套的一个插件,检查sass语法是否正确,插件地址 vscode-fileheader 这个插件可以在文档顶部插入一段说明注释,非常便于你查看当日写了哪些内容

    1.7K10

    CSS — BEM 命名规范

    - 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。...在 css 定义时,也必须依靠层级选择器来限定约束作用域,以避免跨组件的样式污染。...而且,一般来说会使用通过 LESS/SASS 等预处理器语言来编写 CSS,利用其语言特性书写起来要简单很多。...当你选择了这种局部作用域的写法时,在较小的组件中,BEM 格式可能显得没那么重要。但对于公共的、全局性的模块样式定义,还是推荐使用 BEM 格式。...另外,对于对外发布的公共组件来说,一般为了风格的可定制性,都不会使用这种局部作用域方式来定义组件样式。此时使用 BEM 格式也会大显其彩。

    2.9K31
    领券