如何设置特定 react-google-login 组件的样式

Question

因此，我正在尝试使用外部 CSS 为 react-google-login 包中的 GoogleButton 设置样式。更具体地说，我试图将它居中。但是，尽我所能，它不会居中。我试过：

一切都无济于事。考虑到它的 className 为 signInButton?

，我将如何设置组件的样式

以下是我目前的情况描述：

Answer 1

试试这个：

.signInButton {
  float:none;
  position:static;
  display:block;
  margin:auto;
  width:max-content;
}

如果它不起作用，那么您应该提供该按钮使用的 CSS 属性列表。

注意这两个

  float:none;
  position:static;

是可选的，我把它们放在那里是为了覆盖可能干扰对齐的潜在值。

Answer 2

确保父元素是 flexbox。

.parent { 
    display: flex;
    justify-content: center; 
}

如果不想影响父元素，可以将组件包装到新的 div 中并设置样式。

Answer 3

您必须使用 renderProps 创建自定义按钮：

render={renderProps => (
      <button onClick={renderProps.onClick} disabled={renderProps.disabled}>This is my custom Google button</button>
    )}

看看这个 link。

How to style a specific react-google-login component