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

我使用的是mdi-react图标包,但当它与scss结合使用时,"font-size“属性不起作用

mdi-react是一个React组件库,用于在应用程序中使用Material Design图标。而SCSS是一种CSS预处理器,可以增强CSS的功能。

在使用mdi-react图标包时,"font-size"属性不起作用可能是因为在SCSS中没有正确地引入和使用该属性。要解决这个问题,可以按照以下步骤进行操作:

  1. 确保已正确安装和引入mdi-react图标包。可以通过npm或yarn安装mdi-react,并在项目中引入所需的图标组件。
  2. 确保已正确配置和使用SCSS。在项目中使用SCSS时,需要确保已正确配置构建工具(如Webpack或Parcel)以编译SCSS文件,并将其转换为CSS。
  3. 确保在SCSS文件中正确使用"font-size"属性。在需要使用"font-size"属性的地方,可以通过以下方式在SCSS中设置:
  4. 确保在SCSS文件中正确使用"font-size"属性。在需要使用"font-size"属性的地方,可以通过以下方式在SCSS中设置:
  5. 然后,在对应的React组件中,为使用mdi-react图标的元素添加相应的类名,例如:
  6. 然后,在对应的React组件中,为使用mdi-react图标的元素添加相应的类名,例如:
  7. 这样,"font-size"属性就会应用于对应的图标元素。
  8. 如果问题仍然存在,可以检查是否有其他CSS规则或样式覆盖了"font-size"属性。可以使用浏览器的开发者工具检查元素的样式,并查看是否有其他CSS规则影响了"font-size"属性的生效。

总结起来,要解决mdi-react图标包与SCSS结合使用时"font-size"属性不起作用的问题,需要确保正确引入mdi-react图标包、正确配置和使用SCSS,并在SCSS文件中正确设置"font-size"属性。如果问题仍然存在,可以进一步检查是否有其他CSS规则或样式影响了"font-size"属性的生效。

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

相关·内容

实战为王,从零封装 Icon 组件

大家好,这波能反杀,一个 React 超级高手,关注,你也可以成为高手. 本文 React 知命境系列 理论结合实践,是非常有效学习方式。也是本书一直倡导并推行法则。...在学习了 props 属性之后,结合一个实践案例,我们就能够扎实掌握它。 在实践应用中,图标使用无处不在。小到编辑器功能按钮,大到 chrome 浏览器任务栏,都有大量图标需要处理。...每个稍微大一点点项目都必然需要一个图标组件。 在使用时,我们可以控制图标具体类型、颜色、大小。在 React 哲学之封装思想指导下,这些控制项为组件差异项,需要通过 props 传入。...字体图标 最初见到字体图标的应用,在淘宝网站上。当时大家都还在使用雪碧图,而淘宝页面的图标居然可以像字体一样,随意给它设置颜色大小等属性。...把准备图标库里所有图标遍历渲染到页面上结果如下

1.3K20

实战案例:初探工程配置 & 图标组件热身

字符展示依赖字符编码,从 ASCII 到 Unicode,字符集也在不断丰富。计算机并不认识文字、符号或图标,本质上都是通过字符编码结合字体文件、排版引擎等来做渲染。...PUA[15],即 Private Use Areas,私人使用区相同代码点可被分配为不同字符,因此用户可能因安装了某种字体,看到其显示为一种形态,使用了其他字体用户可能看到完全不同字符。...但是我们写死测试,要实现一个可复用图标组件,显然还要预留一些属性交给外部配置,很容易想到属性有: 图标的名称:用来唯一确认一个图标,一个名称对应一个 class,这个 class 会对应一个唯一...下面设置font-size: 15px效果,可见真实高度并不是15px。 如果你希望控制地很彻底,那就应该另外通过width和height去控制了。...但是认为大部分情况,没有这个必要,用font-size粗略控制一下字体图标的大小就差不多了。

63420
  • 【SassSCSS】预加载器中“轩辕剑”

    Sass/SCSS——预加载器中“轩辕剑”,这也不是帮它吹,它自己说,下图为例。...官网地址:SASS中文网 什么Sass,它与SCSS啥关系 感觉这里有点绕,这是怎么回事,明明SASS,但是很多地方写SCSS,网上一搜SCSS出现全是SaSS教程。...优点:使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性,很多人认为这样做比 SCSS 更容易阅读,书写也更快速。...也就是说,任何标准 CSS3 样式表都是具有相同语义有效 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。...下划线underscore风格命名 Sass下划线分割命名,相信各位pym看了别人开源代码也会发现很多吧,类似_partial.scss、_colors.scss ,但是这种命名绝不是闲蛋疼,恰恰利用了

    75840

    Vue3 仿京东电商项目 | 首页开发【项目初始化】

    , 这边暂时简单测试即可: 在main.js中引入: 运行项目: 可以看到字体很大, 因为这里App.vue布局自然在html标签下, 于是默认使用我们方才定义样式尺寸: 使用移动端模拟器...: 或者新建一个项目: 点击到【项目】: 可以查看已有的项目内容: 点击下载到本地, 可以将当前目录下图标的各种格式打包成zip下载下来: 把其中iconfont.css这一部分代码复制一下...: center top; //缩小中心点 // } 优化 | css引入简写 当前css文件引入我们这样写: 其实我们可以在style目录下新建一个文件,如index.scss...结合 图片宽高比 占位技巧】 .banner{ //以下三行,用于防止弱网时,图标加载太慢 //导致周围组件 发生抖动 height: 0; overflow: hidden;...处理后, 更改class属性,使得颜色样式需要判断,默认第一个有蓝色: <!

    1.5K10

    uni-app(优医咨询)项目实战 - 第2天

    1.4.1 单色图标 自定义单色图标的制作和使用与网页面几乎一致,首先在 iconfont.cn 平台制作字体图标,其次下载字体文件及配套样式文件。...@import '@/static/fonts/iconfont.scss'; 在 App.vue 中引入字体文件后可以在任何页面使用字体图标了,使用方式也网页中一样: <...base64,因此使用时可以引入本地字体文件。...虽然多色图标用普通图片来实现,但是我们可以让其使用方式变得方便一些,即从形式上看仍是以字体图标的方式来使用。...语法使用【应用生命周期】和【页面生命周期】需要用到 @dcloudio/uni-app ,这个不需要单独安装,HBuilder X 中内置已经包含,在项目代码中直接使用即可。

    18310

    如何使用SASS编写可重用CSS

    使用CSS时,我们经常在一个全局环境设置,这样可能会错误地设置元素样式。 自定义CSS(即使有CSS变量)仍然是非常冗余。...保持类作用域以避免意外地设置样式有时候有的很累。 即使引入了 CSS 变量以减少声明重复,使用预处理器仍可以解决变量一些问题。 例如:较长变量名。...SCSS概念 嵌套和作用域 设计 HTML文件样式时,SCSS 使我们能够在样式表中拥有相同 HTML 视觉层次结构,这样我们就可以以一种更容易理解方式来设计样式。...有很多内置 Sass 函数可供我们使用,查看文档了解更多信息。 这里列出了一些常用函数: lighten(color, amount):使颜色更浅。...@function 函数名(形参) { @return; } 使用时时直接使用 函数名即可: @function getWidth($w) { @return $w * 2; } .main{

    7.7K20

    uni-app(优医咨询)项目实战 - 第3天

    关于多色图标使用在前面课程中已经介绍过了,关于图标的转换部分就不再演示了,我们直接将转换后代码引入项目中 先将生成多色图标文件 color-fonts.scss 放到项目的根目录中,然后在 App.vue...1.2.1 网络请求 小程序或 uni-app 提供了专门用于网络请求 API ,结合实际开发还需要扩展一些与业务相关逻辑,如基地址、拦截器等功能,通常会对 uni.request 进行封装,luch-request...Pinia,在使用时要注意必须要调用定义好 Store 才会真正创建 Store 实例,对应到下面的代码必须要调用 useCounterStore 后才会创建 Store 实例,即 counterStore...访问,State 数据使用 reactive 创建,直接通过 Store 实例属性方式即可访问,这种访问方式也包括了 getters 访问。 <!...Vue 项目中可以满足基本开发需要了,但是在 uni-app 中时却需要做一些额外配置,原因在于 uni-app 中本地存储使用 uni.setStorageSync 而插件中使用 localStorage.setItem

    36110

    在小程序框架 wepy 中使用 iconfont 图标字体

    目前小程序整体虽然可以达到 8M,每个分包不能超过2M,图标都用图片的话体积太大。 查找并下载图标 我们采用阿里 iconfont。...下载完一个 .zip 压缩,解压得到一系列文件。 除了前两个,其他几个文件都是以 iconfont 作为文件名,只是后缀不同。...最保险把以 iconfont 为文件名几个文件都拷过去,肯定没问题。小程序内核版本应该比较高,在微信内部打开不用考虑兼容性问题,所以我们只用引 iconfont.css 这一个文件即可。...wepy 项目中使用图标字体啦!...以上就是在 wepy 中使用 iconfont 图标字体全部内容。 项目地址:https://github.com/cachecats/coderiver

    1.2K20

    30道CSS 面试知识点总结

    我们必须将给定图标名称添加到任何内联HTML元素中。 (或)。 图标库中图标可缩放矢量,可以使用CSS进行自定义。 问题 18:哪个属性指定边框宽度?...CSS 和 SCSS 之间区别如下: CSS一种用于设计web页面的样式语言,而SCSS用于为浏览器组合CSS样式表。...(2)css单一样式:需要下边距和左边距时候,很多时候选择:margin:top 0 bottom 0;margin-bottom:bot tom;margin-left:left;执行效率更高...使用后代选择器时候,浏览器会遍历所有子元素来确定是否指定元素等等; (2)如果规则拥有ID选择器作为其关键选择器,则不要为规则增加标签。...(9)css雪碧图,同一页面相近部分图标,方便使用,减少页面的请求次数,但是同时图片本身会变大,使用时,优劣考虑清 楚,再使用

    1.4K20

    改善CSS10种最佳做法

    通常,你不会使用框架中每个选择器,因此你软件将包含无效代码。 如果仅对按钮样式使用,则将样式外包给你CSS文件,然后删除其余样式。...它们有助于扩展和维护你项目。这是可以推荐一些流行CSS方法。 BEM BEM(块,元素,修饰符)最流行CSS方法之一。它是命名约定集合,可用于轻松制作可重复使用组件。...你可以使用PostCSS来自动为CSS规则添加前缀,因此你不必担心会遗漏主要浏览器。他们使用可以使用”中值,因此它始终是最新。 另一个很棒后处理器autoprefixer。...5、使用速记属性 为了进一步减少规则数量,请始终尝试使用简写属性。...尽管你可能认为删除轮廓创建突出显示没有任何问题,实际上,你使网站无法访问。通常将此规则添加为CSS重置值。

    80110

    强烈推介几个微信小程序开发小技巧,简单又实用

    使用时可以直接 wx.pro.xx,由于这个方法执行返回一个 Promise 对象,因此可以像其它 Promise 化对象那样使用。...,这里使用到了 upData,就是下面要介绍内容,在下非常推介小程序工具~ ?...3. setState 修改 data 中想修改对象属性 在小程序中,data 不能直接操作,需要使用 setData 函数。...使用 scss 写样式 4.1 Webstorm 配置方法 关于蹩脚 .wxss 样式,使用 webstorm file watcher 工具把 scss 文件监听改动并实时编译成 .wxss...使用 iconfont 图标字体 在 Web 开发中 iconfont 可谓最常用灵活图标字体工具了,这里介绍一下如何在微信小程序中引入 iconfont 图标

    1.5K30

    26 个 CSS 面试高频考点助力金三银四

    它是用于设计Web页面的三剑客之一,另外两位浩客HTML和Javascript。 CSS 设计目的使样式和内容分离,包括布局、颜色和字体。...问题 17:我们如何在网页上添加图标? 我们可以使用诸如font-awesome或者阿里 iconfont 之类图标库将图标添加到HTML网页。...我们必须将给定图标名称添加到任何内联HTML元素中。 (或)。 图标库中图标可缩放矢量,可以使用CSS进行自定义。 问题 18:哪个属性指定边框宽度?...物理元素 物理元素,又叫实体标签,它所做一种物理行为,比如上面把一段文字用b标签加粗了,它所传达给浏览器,告诉浏览器 要加粗这段文字,从单词Bold中也可以看出来,英文中仅仅是加粗意思,并没有其他作用...CSS 和 SCSS 之间区别如下: CSS一种用于设计web页面的样式语言,而SCSS用于为浏览器组合CSS样式表。

    2K20

    如何写好css系列之button

    现代前端行业发展,如果你在css时候,还没有利用一些预编译工具,是否觉得自己太low了。你是否考虑过搭建一套自己前端框架。...三、实现具体细节阐述 本次使用sass作用css预编译器,代码结构如下: ? 说明: 1. _button.scss:实现按钮基本形状和状态; 2...._button.onlyIcon.scss图标按钮实现,在这里申明:图标都是使用font-awesome。 4. _button.link.scss:对按钮扩充为a标签也能支持 5...._button.group.scss:按钮分组 6. _variable.scss:相关变量定义文件 7. main.scss:编译文件入口。其他文件夹表明后期会实现模块。...从sass代码中可以看出,循环了一个colors数组,这里就是为了创建多种不同状态按钮,如:正常、警告、提示等,因为他们背景或字体颜色有区别的。 3.2.

    1.1K70

    SCSS 学习笔记 和 vscode下载live sass compiler插件配置

    例如: 2.1.2.1 给某个元素设定 hover 样式时 2.1.2.2 body 元素有某个 classname 时 2.1.3 属性嵌套 有些 CSS 属性遵循相同命名空间...(namespace),比如 font-family, font-size, font-weight 都以 font 作为属性命名空间。...2.4.1.1 纯SCSS文件引入注意点 注意: 1、如果一个目录正在被 SCSS 程序监测,目录下所有scss/sass源文件都会被编译,通常不希望局部文件被编译,因为局部文件用来被导入到其他文件...通过 #{} 插值语句可以在选择器、属性名、注释中使用变量: 2.10 SCSS 常见函数基本使用 常见函数简介,更多函数列表可看:Sass: Built-In Modules...注意2:使用 @use 时,重复引用 一个文件,会报错,你又想引用,那就需使用模块名。

    52110

    Vue 开发经验小记(持续更新)

    就想在父组件中给子组件传递个变量,子组件改变它值了,父组件中变量也会自动更新。 这就用到一个 "漏洞",把要传递值封装成一个对象,改变对象中属性值,就不会出现警告。...为了实现该效果,它需要组合其他WebKit属性。 常见结合属性: display: -webkit-box: 必须结合属性 ,将对象作为弹性伸缩盒子模型显示。...-webkit-box-orient: 必须结合属性,设置或检索伸缩盒对象子元素排列方式。..., flex 布局,前两个元素靠左,评论图标靠右。...缺点多了层嵌套,有点麻烦。 给评论图标这个元素设置 给评论图标这个元素设置 后两种方法都比较简单,推荐。

    2.8K30

    改善CSS10种最佳做法

    通常,你不会使用框架中每个选择器,因此你软件将包含无效代码。 如果仅对按钮样式使用,则将样式外包给你CSS文件,然后删除其余样式。...它们有助于扩展和维护你项目。这是可以推荐一些流行CSS方法。 BEM BEM(块,元素,修饰符)最流行CSS方法之一。它是命名约定集合,可用于轻松制作可重复使用组件。...你可以使用PostCSS来自动为CSS规则添加前缀,因此你不必担心会遗漏主要浏览器。他们使用可以使用”中值,因此它始终是最新。 另一个很棒后处理器autoprefixer。...5、使用速记属性 为了进一步减少规则数量,请始终尝试使用简写属性。...尽管你可能认为删除轮廓创建突出显示没有任何问题,实际上,你使网站无法访问。通常将此规则添加为CSS重置值。

    70020

    React组件设计实践总结03 - 样式管理

    转换 svg 图标 8️⃣ 结合使用 rem 和 em 等相对单位, 创建更有弹性组件 3....了解 styled-components 局限性 比较能想到局限性性能问题: css-in-js: 需要一个 JS 运行时, 会增加 js 体积(大约 15KB) 相比原生 CSS 会有更多节点嵌套...而 CSS 方案, 对于大型应用要做到有组织有纪律和规划化, 需要花费较大精力, 尤其团队成员能力不均情况下, 很容易失控 ---- 7️⃣ 使用 svgr 转换 svg 图标 如今 CSS-Image-Sprite...svg 图标代替了 font 图标 对比SVG vs Image, SVG vs Iconfont ---- 8️⃣ 结合使用 rem 和 em 等相对单位, 创建更有弹性组件 Bootstrap...个人对于觉得弹性组件来说更重要 em 单位, 尤其那些比例固定组件, 例如 Button, Switch, Icon.

    7.1K20

    【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之自动引入(vue、element-plus)和自定义图标

    vue3组合式API(也是本文采用方式)中无论ref还是生命周期函数之类,都需要在使用时进行手动引入,这里我们把vue组件也还有vue-router自动引入了,后期用时候就无需再手动引入了。...element-plus图标啦,注意,我们使用名字需要时这样格式i-ep-name,例如 // 官方文档点击复制代码 // 需要修改为... 这里提一下,使用包裹着,官方建议用法,特别是在某些element组件嵌套使用时,比如菜单,没有...,因为从iconfont下载svg图标就算不选择颜色,也会自带默认颜色,而有默认颜色svg图标无法设置颜色。...本章就到这里,下一章我们来学习scss使用,以及全局暗黑模式和自定义主题

    2.5K20

    吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧《上》

    下面把这些点点滴滴经验总结下来,做一个系列文章分享和阶段性总结。 常规操作,先点赞后观看哦!你点赞创作动力之一! 概览 ?...•如何管理你资源,如何引入图标,样式?•如何封装你 axios,管理你api?•如何使用 mock 模拟你数据,实现真正意义前后端分离? 实践 实践之前:希望你有如下准备,或者知识储备。...避免全局污染 在页面中写 css/scss 加上 scoped,scoped 功能就是使页面的样式局部,不让影响其他页面的样式。...使用 alias 更好重命名,使之更便捷访问到。...,将整个项目图标一起下载下来 ?

    1.3K30

    SASS用法指南

    比如  E:\Ruby22-x64\bin 配置到系统环境变量 path中 cmd命令行执行 ruby -v  正确则安装配置正确 接下来使用gem给我们装上sass 一般做法直接 gem install...可使用 sass test.scss test.css 将scss文件直接编译成css文件 ? 二、SASS用法: 如上例test.scss文件,可以定义编译后css代码风格。   ...zip($lists…):将几个列表结合成一个多维列表;( 每个单一列表个数值必须相同) zip(1px 2px 3px,solid dashed dotted,green blue red)...他有两个值,条件成立返回一种值,条件不成立时返回另一种值: if($condition,$if-true,$if-false) 上面表达式意思 $condition 条件成立时,返回值为...):使颜色更加透明。

    1.3K20
    领券