自定义AWS Amplify UI? [英] Customise AWS Amplify UI?

问题描述

相信我可能会以错误的方式进行操作，非常感谢您提供有关此问题的指导.

Believe I may be going about this the wrong way and would greatly appreciate guidance on the issue.

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

I’m using React-Native and AWS Amplify for authentication. What I would like to do is change the colours and sizes of the elements.

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

Seen others mention using themes but they don’t have any effect.

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

For example, changing the colour of the sign in button:

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

SignInButton使用主题元素 signInButton

SignInButton uses the theme element signInButton

看到其他人通过创建具有所需更改的新主题来实现这一目标，在我的案例中，这是一个丑陋的按钮，可以确认我可以操纵该主题:

Seen that others approached this by creating a new theme with the changes they wanted, in my case a hideous button to confirm I can manipulate the theme:

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

然后将主题添加到 withAuthencator :

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

UI不变，还看到另一个错误，指出主题为只读

The UI doesn’t change also seen another error that ’theme’is read only

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

Greatly appreciate the help with this issue!

推荐答案

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

There may be a bug in the withAuthenticator HOC related to theme; however, you can directly use the component like so:

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

这篇关于自定义AWS Amplify UI?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！