Open1
【React Amplify Cognito】ログイン画面でボタンのデフォルトの色を変更してみた
yu.miyoshi概要
React, Amplify, Cognito でユーザー認証機能を実装したが、ボタンやリンクに使用されているAmazonのオレンジデフォルトカラーを変更してみる。
したこと
ボタン等の色変更
Before
After
対応内容
- src/配下にstyles.cssを作成し、変更箇所記述
- src/pages/_app.tsxで作成したstyles.cssのimport
早速、styles.cssを作成してみる。
今回はグリーン系の色を使用してみる。
:root {
--amplify-primary-color: #70D14D;
--amplify-primary-tint: #70D14D;
--amplify-primary-shade: #70D14D;
}
次に_app.tsxで作成したcssを呼び出す
......
import '../styles.css'
......
上記手順でボタンの色変更対応ができた。
参考サイト