0

0

react 怎么设置 style属性

藏色散人

藏色散人

发布时间:2023-01-19 14:49:20

|

3558人浏览过

|

来源于php中文网

原创

react设置style属性的方法:1、通过“”方式设置行内样式;2、通过“height: 'calc(100% - 15px)'”设置百分比;3、通过在样式中使用函数“getWinHeight(200)”设置属性即可。

react 怎么设置 style属性

本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

react 怎么设置 style属性?

React中设置样式style

1.设置行内样式:

1.基本设置:

使用{},传入一个对象{padding: '2px 0 5px 20px',overflowY: 'auto'}

如下所示:

2.设置百分比(相对数据)

3.通过函数设置:

例如,自己写一个计算window高度的函数:

塔可商城
塔可商城

塔可商城, 一个基于springboot+uniapp+vue3技术栈开发的开源跨平台小程序、管理后台,后端服务的项目,它内置提供了会员分销, 区域代理, 商品零售等功能的新零售电商系统。强大弹性的架构设计,简洁的代码,最新的技术栈,全方面适合不同需求的前端,后端,架构的同学,同时更是企业开发需求的不二选择。 项目结构通过项目结构,你将清楚明白你即将入手的是一个怎么样的项目,你可能需要什么,如何

下载
//参数 adjustValue的作用是在window.innerHeight的基础上,减去多少高度,可以是负值,0,正值
function getWinHeight(adjustValue) {
    let winHeight;
    if (window.innerHeight) {
      winHeight = window.innerHeight;
    } else if ((document.body) && (document.body.clientHeight)) {
      winHeight = document.body.clientHeight;
    }
    return winHeight-adjustValue;
  }

然后在样式中使用:

2.杂七杂八:

1.table占满整行:

设置table标签的style 为 style={{width: 'calc(100% - 10px)'}}

Edit Parameter Files

2.父

设置高度不起作用:

如果父

设置高度不管用,那么必须将子
的高度也设置一下,可以跟父
的高度保持一致,.

入下图所示:父子

的高度都被设置为  getWinHeight(180)
      
..........
} right={
} />

暂时写这么多,以后想到别的,再写。

推荐学习:《react视频教程

相关文章

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
css中的padding属性作用
css中的padding属性作用

在CSS中,padding属性用于设置元素的内边距。想了解更多padding的相关内容,可以阅读本专题下面的文章。

133

2023.12.07

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

36

2026.01.18

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

99

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

148

2026.01.16

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

56

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

40

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

19

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

107

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

44

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.8万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号