Я настраиваю новейшую версию FCM в Google FCM с помощью кнопки Google, задокументированной здесь. Для управления шириной через API Google с шириной данных , который принимает только количество пикселей, ширина на основе процента.
Это лучшее решение, которое я приехал с до сих пор: < /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
