Question

我在Rails 5.1应用程序中运行最新版本的devise 5。我在样式表中有flash消息的以下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; }

原始代码只有第一堂课。它工作得很好。在阅读了一些有关此问题的旧答案之后，我添加了第二个尝试更改设备中的flash消息的css。来自设计的消息显示我的默认字体大小和颜色，但透明背景。我希望它们与我为flash消息定义的内容相匹配。我发布的那些使用我定义的CSS。

我在哪里/如何覆盖flash消息的设计CSS以匹配我的？

Answer 1

您可能真的想修改标记以匹配您的Flash消息结构。

devise_error_messages! method定义设计错误消息的标记。您可以在ApplicationHelper中覆盖该方法以容纳所需的标记。

Answer 2

我意识到我的问题的一部分是我需要知道什么样的闪存类型。从这个链接我只找到两个：警报和通知。

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

这些都不用于轨道5.它们是危险，信息，成功和警告。我决定将css与危险相匹配，并注意成功。通过这个链接，我发现了一个4年前的答案仍然适用于当前版本的设计。

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

我在样式表中添加了以下两个语句，现在来自Devise的所有消息都显示为我的其他flash消息。

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

Answer 3

来自：https://github.com/heartcombo/devise/blob/master/app/helpers/devise_helper.rb

Devise现在在“ devise / shared / error_messages”下使用部分显示错误消息，使它们更易于自定义。更新你的视图更改了来自以下位置的呼叫

<%= devise_error_messages! %>

收件人：

<%= render "devise/shared/error_messages", resource: resource %>

要开始自定义错误的显示方式，可以复制部分从devise到您的app/views文件夹。或者，您可以运行 rails g devise:views，这会将它们再次复制到您的应用中。

如何编辑CSS：https://github.com/heartcombo/devise/wiki/How-To:-Integrate-I18n-Flash-Messages-with-Devise-and-Bootstrap#css-for-flash-messages（第4步和第3步设计）

设计5：如何修改Devise中的Flash消息以匹配我的CSS消息？

3 个答案: