我如何设置 Googles "save to drive" 按钮的样式

Question

Google 有一个保存到我用于项目的 api 驱动器。我很好奇是否可以设置提供的按钮的样式。在文档中它说您可以创建一个元素并将其覆盖在按钮上，但我似乎找不到任何有效的示例。

他们的工作文档在这里

https://developers.google.com/drive/api/guides/savetodrive

这是我们必须使用的div

              <div
                className="g-savetodrive"
                data-src={file}
                data-filename={file}
                data-sitename="site.com"
              />

该按钮看起来很过时，与我网站的当前样式不相符。

我能够创建一个 div 并使其可以通过指针事件点击：none

但问题是我无法更改“保存到驱动器”按钮的大小，

Answer 1

google 驱动器图标是一个 Iframe，在输出 css 文件中我们可以抓取 Iframe 并更改宽度

iframe {
    width: 230px !important;
}

这样做会改变图标的宽度，这很好...因为默认情况下它很小。但是现在我们如何设计它呢？

我们必须创建一个 'overlay' 我们可以创建一个绝对位置的 div，在 div 里面我们可以添加一个样式按钮

        <div
          style={{
            position: "absolute",
            left: 0,
            pointerEvents: "none",
          }}
        >
          <Button onPress={() => {}}>overlay button</Button>
        </div>

现在这个按钮位于保存到驱动器按钮的顶部。这是一个过于简化的版本，但只是关于如何做到这一点的基础，并展示它是可能的和简单的

通过添加 pointerEvents:"none" 我们能够“点击”按钮，因此 google 驱动器按钮实际上被点击了！

我如何设置 Googles "save to drive" 按钮的样式

How can I style Googles "save to drive" button

html

css

reactjs