首页 > 其他分享 >tsx css class样式如何使用

tsx css class样式如何使用

时间:2024-09-13 21:25:25浏览次数:8  
标签:const 样式 num tsx myObj myData1 class css

参考代码

import { defineComponent, PropType, h, computed, ref, watch } from 'vue';
import type { Reactive, Ref } from 'vue';
import styles from '../scss/child.module.scss';
import '../scss/child.scss'; //这引入的样式是全局的,会影响其他页面其他组件

// 函数局部组件实现
const myDiv = (param1: Ref, param2: Reactive<{ num: number }>) => {
    return (
        <div>
            <div>{param1.value}</div>
            <div>{param2.num}</div>
        </div>
    );
};

export default defineComponent({
    props: {},
    setup(props) {
        // ref 数据传入子组件
        const myData1 = ref<number>(23);

        // reactive 数据传入子组件
        const myObj: Reactive<{ num: number }> = reactive({
            num: 1
        });

        function myClick() {
            console.log('myClick');
            myData1.value++;

            myObj.num++;
        }

        const mycls = {
            color: 'red'
        };

        return () => (
            <div>
                {/* 动态style使用方式 */}
                <div class="abc" style={mycls}>
                    sdkfjskf
                </div>
                <div>{myDiv(myData1, myObj)}</div>
                {/* ref value读取方式 动态class方式 */}
                {/* 局部样式module引入的,只能这样用才能生效了 */}
                <div class={styles.red}>{myData1.value}</div>
                {/* reactive对象数据读取方式 */}
                <div>{myObj.num}</div>
                <div>
                    {/* 事件触发方式 */}
                    <button onClick={() => myClick()}>btn</button>
                </div>
                {/* class 下面这样写想直接生效,那这个class得全局的 */}
                <div class="mycls">sldfjsklfd</div>
                <div className="mycls">sldfjsklfd</div>
                <div className="mycls-green">sldfjsklfd</div>
            </div>
        );
    }
});

global 样式注意事项

需要在局部样式中使用global()才能生效
image
image
image

标签:const,样式,num,tsx,myObj,myData1,class,css
From: https://www.cnblogs.com/jocongmin/p/18412899

相关文章

  • vue2 + scss 全局引入 变量使用
    百度以及时AI帮助说的配置方式都大差不差,但是我的总是报错,意思就是变量找不到,报错如下Foraguideandrecipesonhowtoconfigure/customizethisproject,<br> 然后AI和文章写的vue.config.js的配置内容基本如下module.exports={css:{loaderOp......
  • css滚动条隐藏但是可以滚动
            要实现滚动条隐藏但仍然可以滚动的效果,可以使用CSS来隐藏滚动条,同时允许鼠标的滚轮或触摸板滚动。 /*隐藏滚动条,但仍可滚动*/.scrollable{overflow:auto;/*保持内容可滚动*/scrollbar-width:none;/*对于现代浏览器,隐藏滚动条*/}/*针......
  • CSS 响应式设计(补充)——WEB开发系列36
    随着移动设备的普及,网页设计的焦点逐渐转向了响应式设计。响应式设计不仅要求网页在各种屏幕尺寸上良好展示,还要适应不同设备的特性。1.响应式设计之前的灵活布局在响应式设计流行之前,网页布局通常是固定的或流动的。固定布局使用固定的像素宽度,而流动布局使用相对单位(如百分比)来......
  • CSS文本超出后隐藏并显示省略号及其他浏览器兼容方案
    废话不多说,先上代码!1、只显示一行文字后隐藏并省略//只显示一行文字后省略.element{ width:300px;/*需要设置一个固定宽度*/ white-space:nowrap;/*强制单行显示,不换行*/ overflow:hidden;/*超出盒子部分隐藏*/ text-o......
  • 如何利用 CSS 渐变实现多样化背景效果
    前言总在平常看到像这样的图片背景是如何实现的呢背景效果的多样性和美观性直接影响用户体验。CSS渐变为设计师提供了一种强大且灵活的方法来创建引人注目的背景。渐变是颜色之间平滑过渡的效果,通过调整渐变类型和设置,你可以轻松实现从简单到复杂的各种背景效果。在......
  • 【CSS in Depth 2 精译_029】5.2 Grid 网格布局中的网格结构剖析(上)
    当前内容所在位置(可进入专栏查看其他译好的章节内容)第一章层叠、优先级与继承(已完结)1.1层叠1.2继承1.3特殊值1.4简写属性1.5CSS渐进式增强技术1.6本章小结第二章相对单位(已完结)2.1相对单位的威力2.2em与rem2.3告别像素思维2.4视口的相对单位2.5......
  • [CSS] z-index
    z-index不生效未设置定位z-index仅对定位元素生效,也就是说,元素必须设置了position属性为relative,absolute,fixed或sticky。如果元素的position是默认的static,z-index会失效。堆叠上下文层叠上下文是元素的一个局部层叠环境,z-index只在它所属的层叠上下文中有效......
  • 如何使用谷歌浏览器开发者工具调试CSS
    使用谷歌浏览器内置的开发者工具可以极大地简化CSS调试过程。这套工具不仅可以帮助开发者识别和修正样式问题,还能实时编辑和查看CSS变化,是前端开发不可或缺的助手。下面就给大家分析一下如何使用谷歌浏览器开发者工具调试CSS。(本文由https://www.chromexiazai.net/站点的作者......
  • [CSS] 伪元素和伪类,::before 和 :before 区别
    特点伪类伪元素用途选择元素的状态或基于结构选择元素创建虚拟的内容,操作元素的某些部分语法使用单个冒号(......
  • flex css - 在一定高度后剪辑元素而不是换行
    布局是一种用于创建灵活和响应式布局的CSS技术。它提供了一种更简单和直观的方式来排列和对齐页面元素。通过使用Flex布局,可以轻松实现水平和垂直方向上的对齐、分布和自适应调整。它还支持灵活的容器和项目的大小调整,以及对元素顺序的控制。掌握Flex布局的基础知识对于构建......