Как применить пользовательские стили для входа с кнопкой Google ⇐ CSS

[Anonymous]

Я настраиваю новейшую версию Google FCM в системе кнопки Google (задокументировано здесь):
https://developers.google.com/identity/ ... lay-button# javascript
Согласно их ссылке на HTML:
https://developers.google.com/identity/ ... -reference
Кнопка подается из такого, казалось бы, единственного способа управления шириной-через API Google с помощью WIDTH , который принимает только количество пикселей, не на основе процента. < Br /> Это лучшее решение, которое я представлял до сих пор: < /p>
import { useEffect, useState } from 'react'

export const SignInWithGoogleButton = () => {
const [buttonWidth, setButtonWidth] = useState(0)

useEffect(() => {
const removeScript = loadGoogleScript()
return removeScript
}, [])

const setButtonContainerWidth = (div: HTMLDivElement) => {
const width = div?.getBoundingClientRect().width
setButtonWidth(width)
}

return (


{
console.log(arg)
}}
ref={setButtonContainerWidth}
/>

)
}

const loadGoogleScript = () => {
const script = document.createElement('script')
script.src = 'https://accounts.google.com/gsi/client'
script.async = true
script.defer = true
document.body.appendChild(script)

return () => {
document.body.removeChild(script)
}
}

< /code>
Но это кажется довольно опасным (iframe переполняет контейнер, поэтому мне приходится скрывать это с переполнением: скрыто), и кажется, что должно быть лучше /чище Способ сделать. Каким -то образом им удалось достичь полной единообразии между всеми кнопками. Я не знаком с версией Apple, и, возможно, она более настраиваемо, и они основывали стили кнопок Apple на Google, но я надеюсь, что кто -то может показать некоторое представление о том, как я мог бы улучшить это.

Подробнее здесь: https://stackoverflow.com/questions/794 ... gle-button