如何修改Svelte Material UI中IconButton的尺寸为60px？

SMUI的IconButton仅提供normal/mini/button三种预设尺寸，要实现60px的自定义尺寸，直接通过CSS覆盖组件默认样式即可，步骤如下：

1. 给IconButton添加自定义类名，比如large-icon-button
2. 在样式中针对这个类设置宽高，并调整内部图标大小适配按钮

修改后的完整代码如下：

<script>
    import IconButton, { Icon } from '@smui/icon-button';
    import { mdiPlusCircle } from '@mdi/js';
    import { Svg } from '@smui/common';
</script>

<div class="container">
    <div class="new-request">
        <div>
            <!-- 添加自定义类large-icon-button -->
            <IconButton class="material-icons large-icon-button" size="normal">
                <Icon component={Svg} viewBox="0 0 24 24">
                    <path fill="currentColor" d={mdiPlusCircle} />
                </Icon>
            </IconButton>
        </div>
        <div class="mdc-typography--overline" style="font-size:1.8rem;">New request</div>
    </div>
</div>

<style>
    .container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        margin: auto;
        height: 100%;
    }
    .new-request {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* 自定义大尺寸按钮样式 */
    .large-icon-button {
        width: 60px !important;
        height: 60px !important;
    }
    /* 调整内部图标大小，和按钮尺寸匹配 */
    .large-icon-button .mdc-icon-button__icon {
        font-size: 36px;
    }
</style>

说明：

• 使用!important是为了确保自定义样式能覆盖SMUI组件的默认内联样式或类样式
• 图标尺寸可以根据需求调整，36px是和60px按钮比例协调的参考值

内容的提问来源于stack exchange，提问作者Mike Casan Ballester