devise 5：私のCSS for flashメッセージと一致するようにDeviseのFlashメッセージを変更するにはどうすればよいですか？

Question

私はRails 5.1アプリケーションで最新のバージョンのdevise 5を実行しています。私は自分のスタイルシートにフラッシュメッセージ用の次のCSSコードを持っています。

div.alert.alert-danger, .alert-danger { background-color: #ff0000; } 
div.alert.alert-info, .alert-info { background-color: #99d7ea; } 
div.alert.alert-success, .alert-success { background-color: #a3da2f; } 
div.alert.alert-warning , .alert-warning { background-color: #e6c856; } 

元のコードには最初のクラスしかありませんでした。それはうまく動作します。これに関するいくつかの古い答えを読んだ後、私は、フラッシュメッセージのCSSを変更する試みを追加しました。 deviseからのメッセージは、デフォルトのフォントサイズと色で表示されますが、背景は透明です。私は彼らが私のフラッシュメッセージのために定義したものと一致させたい。私が発行したものは私が定義したCSSを使用しています。

/どのように私は、フラッシュメッセージは私と一致するための工夫のCSSを上書きすることができますか？

Answer 1

実際には、フラッシュメッセージの構造に合わせてマークアップを変更する必要があります。

devise_error_messages!methodは工夫のエラーメッセージのためのマークアップを定義します。 ApplicationHelperのメソッドをオーバーライドして、必要なマークアップに対応できます。

Answer 2

私は私の問題の一部は、私はフラッシュタイプだった工夫何を知っておく必要があることに気づきました。このリンクから私は2つしか見つけませんでした：警告と通知。

https://github.com/rails/rails/blob/4-2-stable/actionpack/lib/action_controller/metal/flash.rb#L10

これらのどちらがレール5で使用されている彼らは危険、情報、成功と警告しています。私は危険のような警告と成功のような注意のためにCSSにマッチすることに決めました。このリンクから私は4年前の答えを見つけましたが、それは現在のバージョンのdeviseでまだ動作しています。

Rails 3.1 Devise How To Change Flash Message CSS From notice to success?

私は自分のスタイルシートに次の2つのステートメントを追加し、現在考案からのすべてのメッセージは、私の他のフラッシュのメッセージのように表示されます。

.alert-alert { @extend .alert-warning; } 
.alert-notice { @extend .alert-success; }