reactjs - float 操作按钮 : Is there a straightforward way to make a button smaller than default mini?

Question

这是按钮默认大小的屏幕截图 ( http://www.material-ui.com/#/components/floating-action-button )


mini尺寸按钮为 40x40 像素。有没有一种简单的方法可以将尺寸缩小到 30x30 或任何其他自定义尺寸？比如说，通过提供 prop={{size: '30:30'}}或以某种方式通过造型。

Answer 1

对于那些仍在寻找解决方案的人，我必须通过“iconStyle” Prop 应用样式。

const myStyle = {
    height: 20,
    width: 20,
};

<FloatingActionButton iconStyle={ myStyle } />

然而，对我来说，这导致了我的图标偏离中心的问题。于是 myStyle 变成了:

const myStyle = {
    height: 20,
    lineHeight: '20px',
    verticalAlign: 'middle',
    width: 20,
};