vue3 中使用 Jsx 或者 Tsx 语法添加元素并且样式使用 scoped 会不生效-样式不生效

最新推荐文章于 2024-08-30 16:47:08 发布

原创最新推荐文章于 2024-08-30 16:47:08 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #javascript

H5 同时被 2 个专栏收录

4 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文详细讲述了如何从tsx代码中移除 scoped 样式属性，以解决因范围限制找不到类名的问题。通过实例演示了如何添加新的未受限style，并解释了编译失效的原因。优化后的代码将确保样式正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

动态添加渲染模块代码如下

代码片.


<script lang="tsx">	
	_sums = (
		<div class="sum_row">
		    <div class="bottom-line">
		      {sum * 100}%<font style="display: none;">/</font>
		    </div>
		    <div></div>
		</div>
	);
	
</script>

<style lang="less"  scoped>
.sum_row div {
    min-height: 40px;	
    line-height: 40px;
    width: 100%;
  }
  .sum_row .bottom-line {
    position: relative;
  }
  .sum_row .bottom-line:after {
    content: "";
    position: absolute;
    left: -10px;
    right: -10px;
    bottom: 0;
    height: 1px;
    background-color: #ebeef5;
  }
</style>