我正在使用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);
4条答案
按热度按时间up9lanfz1#
最新版本的Amplify支持以下样式表
更多详情,请访问Official AMPLIFY documents
67up9zun2#
添加css导入,这一行在
Amplify.configure
之前。这是Amplify 3.x到4.x的突破性变化。
详细内容写在这个网站上。
https://github.com/aws-amplify/amplify-js/issues/5445
dffbzjpn3#
我也收到了同样的问题。我浏览了
@aws-amplify
文件,结果发现需要导入ui-react-v1
而不是ui-react
。尝试导入以下行,以使样式正确显示,如模块示例。import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react-v1';
我希望这能帮助你和其他任何人得到这个问题!
oxcyiej74#
你应该导入
@aws-amplify/ui-react/styles.css
的样式下面是将
import
放入index.js
文件的位置。