deviseのエラーメッセージをカスタマイズしたい

Question

deviseを利用してログイン機能を作成しました。
サインアップ時に空欄で登録するとエラーメッセージが表示されるように設定しています。
文字の色を変更したいのですが、やり方が分からず質問させていただきました。

現在form_forの下に<%= render "devise/shared/error_messages", resource: resource %>でエラーメッセージを表示しています。

<%= render 'shared/header' %>

<div class="user-information">
  <div class="user-information-item">

  <h2 class="header-space">Sign up</h2>
  
  <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
    <%= render "devise/shared/error_messages", resource: resource, :class => 'devise-error-messages' %>
  
    <div class="field user-form">
      <%= f.label :Name %><br />
      <%= f.text_field :name, autofocus: true, autocomplete: "name" %>
    </div>
    
    <div class="field user-form">
      <%= f.label :email %><br />
      <%= f.email_field :email, autofocus: true %>
    </div>
  
    <div class="field user-form">
      <%= f.label :password %>
      <% if @minimum_password_length %>
      <em>(<%= @minimum_password_length %> characters minimum)</em>
      <% end %><br />
      <%= f.password_field :password, autocomplete: "new-password" %>
    </div>
  
    <div class="field user-form">
      <%= f.label :password_confirmation %><br />
      <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
    </div>
  
    <div class="actions user-form">
      <%= f.submit "Sign up", class: "btn btn-success" %>
    </div>
  <% end %>

  <%= render "devise/shared/links" %>
  
  </div>
</div>

<%= render 'shared/footer' %>

Comments

[raccy]

CSSはわかりますか？また、RailsにおいてCSSの中身を変更するにはどこに書いたらいいのかはわかりますか？

[退会済みユーザー]

はい。
:class => 'devise-error-messages'としていますが、適用できませんでした。

Answer 1

render に :class => 'devise-error-messages' と書いても、部分テンプレートに変数として渡されるだけなので意味がありません。

app/views/devise/shared/_error_messages.html.erb を直接編集してください。

部分テンプレートに現在どのようなコードを書かれているのかは分かりませんが、例えば、

<% if resource.errors.any? %>

    <%# ・・・中略・・・ %>

        <%# 任意のクラスを追加 %>
        <li class="devise-error-messages"><%= message %></li>

    <%# ・・・中略・・・ %>

<% end %>

.devise-error-messages {
  color: red;
}

のような形で記述することになると思います。