👋
@amplify/ui-reactを4.xから5.xにアップデートする
はじめに
Amplify を色々触っているうちに、どうやらボタンコンポーネントの新しいバリエーションが増えていることに気がつきました。
@amplify/ui-reactのアップデートが必要みたいので、今回はアップデートを実践してみたいと思います。
アップデートコマンド
もう、公式見ながらやってしまいますよ〜
npm install @aws-amplify/ui-react@5.x
npm install @aws-amplify/ui-react@5.x
removed 72 packages, changed 4 packages, and audited 2484 packages in 12s
263 packages are looking for funding
run `npm fund` for details
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
脆弱性の警告が出てるな。。あとで直さなきゃな。
さっそく実装してみる
とりあえず横に並べてみましょう。
純粋に@colorThemeのみ書いた場合の例です。
<Flex gap="24px" margin="16px 16px">
<Button colorTheme="info">
info
</Button>
<Button colorTheme="overlay">
overlay
</Button>
<Button colorTheme="success">
success
</Button>
<Button colorTheme="error">
error
</Button>
<Button colorTheme="warning">
warning
</Button>
</Flex>
画面表示した結果がこちらです。
@variantと@colorThemeを組み合わせるとどうなるの？？
という疑問が湧いてきたので、やってみます。
結果、destructive、warningについてはvariantが強く、それ以外は、colorThemeが有効になるんですね。
（一番上が、variantのみの表示。
2 つ目からはvariantの設定をしつつ、colorThemeを設定してみた結果になります）
まとめ
というわけで、@amplify/ui-reactを 4.x から 5.x アップデートをしてみたわけですが、特にトラブルなくアップデートできてしまいました。
@colorThemeと@variantの関係性については、基本的には@colorTheme > @variantの関係のようですが、destructiveとwarningについては、variantが強く、指定しても影響しなそうです。
参考リンク
Discussion