Vue项目中如何统一Apple与Google SSO按钮的文字大小？

云原生阿岚

2026-6-14

统一Apple与Google登录按钮的字体大小

问题背景

我在Vue项目中集成了Apple和Google登录按钮，需要让两个按钮的文字大小保持一致。不想通过缩放Apple按钮来调整尺寸，希望直接修改字体大小——要么调大Google按钮的字体，要么调小Apple按钮的字体。

解决方案

1. 调整Apple登录按钮的字体大小

Apple登录按钮由官方脚本生成，自带默认样式。由于组件使用了scoped样式，需要用深度选择器穿透样式隔离，直接修改按钮内的文本字体：

修改Apple按钮组件的<style>部分：

<style scoped lang="scss">
.mvne-apple-button {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    #appleid-signin {
        cursor: pointer;
        // 用深度选择器修改Apple按钮的文本字体
        ::v-deep .appleid-signin-text {
            font-size: 14px !important; // 按需调整为和Google按钮一致的大小
        }
    }
    max-width: 100% !important;
}
</style>

提示：可通过浏览器开发者工具查看Apple按钮的DOM结构，确认文本元素的类名（通常是.appleid-signin-text），确保选择器准确。

2. 调整Google登录按钮的字体大小

Google登录按钮同样是第三方生成的，需要定位按钮内的文本元素，用深度选择器修改字体：

修改Google按钮组件的<style>部分：

<style lang="scss">
.mvne-sso-button {
    display: flex;
    justify-content: center;
    [aria-labelledby="button-label"] {
        max-width: 100% !important;
    }
    // 穿透修改Google按钮的文本字体
    ::v-deep .g_id_signin button span {
        font-size: 14px !important; // 和Apple按钮设置相同的字号
    }
}
.g_id_signin {
    border: 1px solid black;
    border-radius: 24px !important;
}
</style>