我试图在 JSX 中使我的按钮尺寸更小，但我不知道如何答案

【问题标题】：I am trying to make my button size smaller in JSX but I do not know how to我试图在 JSX 中使我的按钮尺寸更小，但我不知道如何
【发布时间】：2020-12-15 17:17:01
【问题描述】：

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

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

非常感谢

【问题讨论】：

标签： reactjs button jsx

【解决方案1】：

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

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

你的想法是对的，但是 style 属性的语法是错误的——因此是编译错误。

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

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

在 JSX 的 style 属性中，看起来像这样

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

【讨论】：

非常感谢它的工作我非常感谢@davnicwil

【解决方案2】：

你也可以传递内联样式

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

【讨论】：

非常感谢。

【解决方案3】：

你也应该提供你正在导入的 css，因为它可以通过它来解决。

除此之外，只需通过 css 或 style 道具传递最大高度和/或宽度，它应该可以工作。

注意：如果设置了最大宽度或高度，则不需要指定另一个，只需将其设置为自动，它将保持比例。

如果你附上 css，我可以给你额外的帮助。

【讨论】：

非常感谢。