React设置样式style
1.设置行内样式:
1.基本设置:
使用{},传入一个对象{padding: '2px 0 5px 20px',overflowY: 'auto'}
如下所示:
<div style={{padding: '2px 0 5px 20px',overflowY: 'auto'}}
2.设置百分比(相对数据)
<div style={{width: 'calc(100% - 35px)',height: 'calc(100% - 15px)'}}>
3.通过函数设置:
例如,自己写一个计算window高度的函数:
-
//参数 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;
-
}
然后在样式中使用:
-
<div style={{width: 'calc(100% - 35px)',height: getWinHeight(200)}}>
-
<div id="jsoneditor" className="jsoneditor-react-container" />
-
</div>
2.杂七杂八:
1.table占满整行:
设置table标签的style 为 style={{width: 'calc(100% - 10px)'}}
-
<table style={{width: 'calc(100% - 10px)'}}>
-
<tr>
-
<td style={{width:'50px'}}>
-
<div style={{paddingTop:"10px",marginLeft:'10px'}}>
-
<Button
-
id="returnButtonId"
-
text=""
-
icon={"ic_arrow_back"}
-
onClick={doBack}
-
/>
-
</div>
-
</td>
-
<td>
-
<div style={{paddingTop:'10px'}}>Edit Parameter Files</div>
-
</td>
-
<td>
-
<div style={{float:'right', margin:'0 10px 0 10px', paddingTop:'10px'}}>
-
<Button
-
id="`uploadButtonId`"
-
text="UPLOAD"
-
icon={"ic_arrow_upward"}
-
onClick={onUploadClicked}
-
/>
-
</div>
-
</td>
-
</tr>
-
</table>
2.父 <div>设置高度不起作用:
如果父<div>设置高度不管用,那么必须将子<div>的高度也设置一下,可以跟父<div>的高度保持一致,.
入下图所示:父子<div>的高度都被设置为 getWinHeight(180)
-
<div style={{height: getWinHeight(180), border:'2px'}}>
-
<SplitScreen
-
id="parameterfiles-panel"
-
left={
-
<div style={{height: getWinHeight(180)}}>
-
..........
-
</div>
-
}
-
right={
-
<div style={{ whiteSpace: "nowrap"}}>
-
<div style={{padding: '2px 0 5px 20px',overflowY: 'auto', width: 'calc(100% - 35px)',height: getWinHeight(180)}}>
-
<div id="jsoneditor" className="jsoneditor-react-container" />
-
</div>
-
</div>
-
}
-
/>
-
</div>
暂时写这么多,以后想到别的,再写。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgagjie
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13