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

Question

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

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

Answer 1

Have you tried adding a style to the FAB with height and width set to 20?

I've used something like this before and it's been fairly straightforward to work with

const styles = {

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

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

This should apply the fabStyle style to your FAB, provided you don't have any parent components that have different styling already applied.

I don't really use the prop={{size: '30:30'}} syntax for styling of components, and I'm not sure it works with react/mui. It's pretty easy to use the style prop on components and then assign them a style you define. Check out the page where you found the fab screenshot above and you will see they use a similar idea on styling.

I hope this helps you out!