自定义 AWS Amplify UI？答案

【问题标题】：Customise AWS Amplify UI?自定义 AWS Amplify UI？
【发布时间】：2019-11-08 08:19:25
【问题描述】：

相信我可能会以错误的方式解决此问题，并且非常感谢有关此问题的指导。

我正在使用 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

SignInButton 使用主题元素signInButton

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

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

然后将主题添加到withAuthencator：

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

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

非常感谢有关此问题的帮助！

【问题讨论】：

他们的例子现在有五个道具：withAuthenticator(App, false, [], null, MyTheme)

标签： javascript react-native aws-amplify

【解决方案1】：

withAuthenticator HOC中可能存在主题相关的bug；但是，您可以像这样直接使用该组件：


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>
    );
  }
}

【讨论】：