自定义 AWS Amplify UI？

相信我可能会以错误的方式处理这个问题，并且非常感谢有关该问题的指导。

我使用 React-Native 和 AWS Amplify 进行身份验证。我想做的是改变元素的颜色和大小。

看到其他人提到使用主题，但没有任何效果。

例如，更改登录按钮的颜色：

https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react/src/Amplify-UI/Amplify-UI-Components-React.tsx https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react/src/Amplify-UI/Amplify-UI-Components-React.tsx

SignInButton 使用主题元素signInButton

看到其他人通过创建一个带有他们想要的更改的新主题来解决这个问题，在我的例子中，有一个可怕的按钮来确认我可以操纵主题：

const theme = {
  ...AmplifyTheme,
  signInButton: {
color: "red",
backgroundColor: "green"
  } 
}

然后添加主题withAuthencator:

export default withAuthenticator(App, true, theme={theme})

UI 没有改变还看到另一个错误’theme’is read only

非常感谢您对这个问题的帮助！

withAuthenticator HOC 中可能存在与主题相关的错误；但是，您可以直接使用该组件，如下所示：

const MySectionHeaderText = Object.assign({}, AmplifyTheme.sectionHeaderText, { 'fontSize': 10 });
const MyTheme = Object.assign({}, AmplifyTheme, { sectionHeaderText: MySectionHeaderText });

class App extends React.Component {
  render() {
    return (
        <Authenticator theme={MyTheme}></Authenticator>
    );
  }
}