HarmonyOS 如何自定义一键登录组件的颜色？

Question

如题：HarmonyOS 如何自定义一键登录组件的颜色？

Answer 1

1. 一键登录组件中有提供“customButtonParams”属性对象，此对象中有提供设置按钮背景颜色以及设置按钮字体颜色的参数

<p id="p49651020249">名称</p>	<p id="p2966110102411">类型</p>	<p id="p12966501249">只读</p>	<p id="p119668082414">可选</p>	<p id="p1996614012242">说明</p>
<p id="p1896611072419">fontColor</p>	<p id="p2966150152416">FontColor</p>	<p id="p169663015248">否</p>	<p id="p1396613002416">是</p>	<p id="p396620162417">LoginWithHuaweiIDButton按钮文字颜色。</p> <p id="p496612012417">默认值：FontColor.WHITE</p>
<p id="p1966190122415">backgroundColor</p>	<p id="p7966160132411">ResourceColor</p>	<p id="p896630122410">否</p>	<p id="p396640142411">是</p>	<p id="p7966170182417">LoginWithHuaweiIDButton按钮的背景颜色。</p> <p id="p29661801244">默认值：Red 红色背景</p>

2. 可以通过定义“customButtonParams”属性的值修改一键登录组件的背景和字体颜色

自定义黑色背景以及白色字体：

import { loginComponentManager, LoginWithHuaweiIDButton } from '@kit.AccountKit';

@Entry
@Component
struct HWAccountPage {
  build() {
    Row() {
      Column() {
        LoginWithHuaweiIDButton({
          params: {
            // LoginWithHuaweiIDButton支持的样式。
            style: loginComponentManager.Style.BUTTON_CUSTOM,
            // LoginWithHuaweiIDButton的边框圆角半径。
            borderRadius: 24,
            // LoginWithHuaweiIDButton支持的登录类型。
            loginType: loginComponentManager.LoginType.QUICK_LOGIN,
            // LoginWithHuaweiIDButton支持按钮的样式跟随系统深浅色模式切换。
            supportDarkMode: true,
            //自定义按钮背景颜色色以及按钮字体颜色
            customButtonParams: {
              fontColor: loginComponentManager.FontColor.WHITE,
              backgroundColor: '#000000'
            }
          },
          // controller: this.controller
        })
          .height(40)
          .width('80%')
          .constraintSize({ maxWidth: 448 })
      }
      .width('100%')
    }
    .height('100%')
  }
}