放大 UI 在 React js 中无法正常工作

Question

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

Answer 1

添加css导入，Amplify.configure前这一行。

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

这是 Amplify 3.x 到 4.x 的重大更改。

详细信息写在这个网站上。
https://github.com/aws-amplify/amplify-js/issues/5445

Answer 2

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

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

有关详细信息，请访问 Official AMPLIFY documents

Answer 3

我遇到了完全相同的问题。我查看了 @aws-amplify 文件，结果发现需要导入 ui-react-v1 而不是 ui-react。尝试导入以下行以使您的样式像模块示例一样正确显示。

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react-v1';

我希望这对您和遇到此问题的其他人有所帮助！

放大 UI 在 React js 中无法正常工作

Amplify UI is not working proper in React js

reactjs

aws-amplify