浮动操作按钮：是否有一种简单的方法使按钮小于默认迷你？

Question

这是按钮默认尺寸（http://www.material-ui.com/#/components/floating-action-button）

的屏幕截图

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

Answer 1

我只发现了这个hacky（但至少是工作）的解决方案：

.button-class {
  > button {
    height: 22px !important;
    width: 22px !important;
    svg {
      height: 22px !important;
      width: 16px !important;
    }
  }
}

Answer 2

您是否尝试过将样式添加到FAB，高度和宽度设置为20？

之前我曾经使用过这样的东西，而且使用起来非常简单

const styles = {

    fabStyle: {
        height: '20',
        width: '20',
    }
}

<FloatingActionButton ... style={styles.fabStyle}/>

这应该将fabStyle样式应用于您的FAB，前提是您没有任何已经应用了不同样式的父组件。

我没有真正使用prop={{size: '30:30'}}语法来设置组件的样式，我不确定它是否与react / mui一起使用。在组件上使用样式支柱非常容易，然后为它们分配您定义的样式。看看上面找到fab截图的页面，你会看到他们在造型上使用了类似的想法。

我希望这会帮助你！

Answer 3

对于那些仍在寻找解决方案的人，我必须通过＆＃39; iconStyle＆＃39;来应用这种风格。丙

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

<FloatingActionButton iconStyle={ myStyle } />

然而，对我而言，这导致了我的图标偏离中心的问题。所以myStyle成了：

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

Answer 4

如果设置样式和iconStyle，我就能实现这一目标。

template <ColorType ColorTypeT> class Image

Answer 5

看看Button API。

您可以将属性mini={true}设置为较小的浮动操作按钮。

Answer 6

当我遇到这个问题时，上述解决方案都无法为我服务。

如果您为FAB设置了内联样式并指定了最小/最大尺寸，则它应该可以工作：

const myStyle = {
    maxHeight: "30px",
    minHeight: "30px",
    minWidth: "30px",
    maxWidth: "30px",
};

return 
    <Fab style={myStyle}><Fab/>

Answer 7

更改FAB按钮大小的正确方法是使用大小道具。

size = {'small' | 'medium' | 'large'}

赞：

<Fab size="small">
    <AddIcon />
</Fab>

是 Material Design UI v1 在 2018年5月18日发布之后使用的新语法。