React中设置样式style方式
作者：困知勉行1985
这篇文章主要介绍了React中设置样式style方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
设置行内样式
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>杂七杂八
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>总结
暂时写这么多，以后想到别的，再写。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。