如何解决我正在尝试在JSX中减小按钮尺寸,但是我不知道该怎么做
这是我的JSX文件
import React from 'react';
import closeIcon from '../../icons/closeIcon.png';
import onlineIcon from '../../icons/onlineIcon.png';
import './InfoBar.css';
const InfoBar = ({room}) => (
<div className="infoBar">
<div className="leftInnerContainer">
<img className= "onlineIcon" src={onlineIcon} alt="open 6342 56837 Image" />
<h3>{room}</h3>
</div>
<div className="rightInnerContainer">
<a href="/"><img src={closeIcon} alt="close 6342 56837 Image"/></a>
</div>
</div>
)
export default InfoBar;
非常感谢
解决方法
在附件图像中,您已经定义了这样的内联样式
<div className="leftInnerContainer" style={{"width:60px"},{"height:30px"}}
您的想法正确,但是样式prop的语法错误-从而导致编译错误。
它必须是一个普通的Javascript对象,其正确的语法是这样
{ width: "60px",height: "30px" }
在JSX的style
道具中,看起来像这样
<div className="leftInnerContainer" style={{ width: "60px",height: "30px" }}
,
您也应该提供要导入的css,因为它可以通过此操作解决。
此外,只需通过css或style
传递最大高度和/或宽度就可以了。
注意:如果您设置了最大宽度或高度,则无需指定其他宽度或高度,只需将其设置为自动即可保留比例。
如果您附上CSS,我可以为您提供更多帮助。
,您还可以传递内联样式
<img className= "onlineIcon" src={onlineIcon} style={{height:"20px",width:"20px"}}alt="open 6342 56837 Image" />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。