我正在尝试在JSX中减小按钮尺寸，但是我不知道该怎么做。

Question

我想使按钮和状态符号变小，它们对于屏幕聊天来说太大了。

这是我的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;

非常感谢

Answer 1

在附件图像中，您已经定义了这样的内联样式

<div className="leftInnerContainer" style={{"width:60px"},{"height:30px"}}

您的想法正确，但是样式prop的语法错误-从而导致编译错误。

它必须是一个普通的Javascript对象，其正确的语法是这样

{ width: "60px", height: "30px" }

在JSX的style道具中，看起来像这样

<div className="leftInnerContainer" style={{ width: "60px", height: "30px" }}

Answer 2

您也应该提供要导入的css，因为它可以通过此操作解决。

此外，只需通过css或style传递最大高度和/或宽度就可以了。

注意：如果您设置了最大宽度或高度，则无需指定其他宽度或高度，只需将其设置为自动即可保留比例。

如果您附上CSS，我可以为您提供更多帮助。

Answer 3

您还可以传递内联样式

<img className= "onlineIcon" src={onlineIcon} style={{height:"20px",width:"20px"}}alt="open 6342 56837 Image" />