首页 > 其他分享 >动态设置外部传递过来的css样式

动态设置外部传递过来的css样式

时间:2022-11-29 16:45:09浏览次数:45  
标签:样式 props 外部 progress strokeColorBg 动态 css

1. props接收测值参数

  props: {
    strokeColorBg: {
      type: String,
      default: ''
    }
  },

2. 在元素身上接收一下

  <a-progress
            :percent="30"
            class="progress"
            :style="{ '--card-strokeColorBg': strokeColorBg }"
          />

3. 在css中使用动态参数

        .progress {/deep/ .ant-progress-inner {
            background-color: var(--card-strokeColorBg);
          }
        }

 

标签:样式,props,外部,progress,strokeColorBg,动态,css
From: https://www.cnblogs.com/hwy6/p/16935805.html

相关文章

  • CSS/HTML
    CSS/HTML一、基础知识1、盒子模型:padding设置内边距(上右下左),margin设置外边距,border设置边框2、单位相对长度单位:em,rem,%绝对长度单位:cm,px,pt等3、overflow处理溢出,......
  • [CSS3] Container query
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries Usethecontainer-type propertyavalueof size, inline-size,or normal.Theseva......
  • CSS设置边距
    1.内边距所有的​HTML ​元素基本都是以矩形为基础。每个HTML元素周围的矩形空间由三个重要的属性来控制:​padding(内边距)​​margin(外边距)​​border(边框)​ ​......
  • 实现序号连接线的一种样式列表
    实现一种序号的连接线,类似于element-ui组件库里面的时间线组件,在工作中,这种样式的列表经常见到,如下图:这种列表在vue里面样式的实现,废话不多说,直接上图这样的列表样式h......
  • oracle 使用sqlload导入外部数据
    使用SQLload大批量导入数据第一步:创建表CREATETABLE"TESTHT"."DEMO"( "ID"VARCHAR2(20BYTE)NOTNULLENABLE, "NAME"VARCHAR2(20BYTE), "AGE"VAR......
  • vue3-vite下tailwindcss安装与配置
    初始化TailwindCSS安装Tailwind以及其它依赖项:npminstall-Dtailwindcss@latestpostcss@latestautoprefixer@latest一、创建您的配置文件接下来,生成您的 t......
  • vue3-vite下配置postcss-pxtorem进行移动端适配
    如果使用Vue进行移动端页面的开发,需要对不同机型的宽高进行适配。最常用的方法是使用amfe-flexable和postcss-pxtorem这两个插件来帮助进行适配。amfe-flexableamfe-flex......
  • 【CSS】609- 改善CSS的10种最佳做法
    CSS似乎是一种非常简单的语言,很难在其中犯错误。你只需添加样式规则,就可以对网站进行样式设置了,对吗?对于只需要几个CSS文件的小型网站,情况可能就是这样。但是在大型应用程序......
  • 2022年鲜为人知的CSS 特性了解起来~
    前言随着CSS的不断发展,一些很酷且有用的属性要么完全被忽视,要么由于某种原因不像其他常见属性那样被开发者熟练应用。这篇文章我们将一起学习那些CSS中陌生但非常有用的CS......
  • CSS伪类使用详解
    基本描述CSS伪类是很常用的功能,主要应用于选择器的关键字,用来改变被选择元素的特殊状态下的样式。伪类类似于普通CSS类的用法,是对CSS选择器的一种扩展,增强选择器的功能。......