reactjs Amplify UI在React js中无法正常工作

tv6aics1  于 2023-06-29  发布在  React
关注(0)|答案(4)|浏览(114)

我正在使用AWS Amplify进行用户身份验证。UI不是预期的那样,但功能没有问题。

放大依赖关系

"dependencies": {
    "@aws-amplify/ui-react": "^2.1.4",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "aws-amplify": "^4.3.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  }

我的app.js

import logo from "./logo.svg";
import "./App.css";
import Amplify from "aws-amplify";
import awsconfig from "./aws-exports";
import { withAuthenticator } from "@aws-amplify/ui-react";
Amplify.configure(awsconfig);

function App() {
  return (
    <div className="App">
      <header className="App-header">
        {/* <AmplifySignOut /> */}
        <h2>Amplify App</h2>
      </header>
    </div>
  );
}

export default withAuthenticator(App);
up9lanfz

up9lanfz1#

最新版本的Amplify支持以下样式表

import '@aws-amplify/ui-react/styles.css';

更多详情,请访问Official AMPLIFY documents

67up9zun

67up9zun2#

添加css导入,这一行在Amplify.configure之前。

import '@aws-amplify/ui/dist/style.css';

这是Amplify 3.x到4.x的突破性变化。
详细内容写在这个网站上。
https://github.com/aws-amplify/amplify-js/issues/5445

dffbzjpn

dffbzjpn3#

我也收到了同样的问题。我浏览了@aws-amplify文件,结果发现需要导入ui-react-v1而不是ui-react。尝试导入以下行,以使样式正确显示,如模块示例。
import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react-v1';
我希望这能帮助你和其他任何人得到这个问题!

oxcyiej7

oxcyiej74#

你应该导入@aws-amplify/ui-react/styles.css的样式
下面是将import放入index.js文件的位置。

import { Amplify } from 'aws-amplify';
import config from './aws-exports';
import '@aws-amplify/ui-react/styles.css'; // ** this is missed importing **
Amplify.configure(config);

相关问题