Bootstrapでナビバーを作り、リスト形式でログインボタンを作っていた時の事です。
ログインしている時としてない時のボタン表示を if user_signed_in?で分けています。
link_to形式の記述にcssが効かなくて、検索しても「サッ」と出て来なかったので簡単にまとめました。
link_toにcssを効かせるには？
ログアウト・新規登録・ログインボタンのサイズを変更したかった時の記述です。
header.html.erb
<%ifuser_signed_in?%><liclass="nav-item active"><%=link_to"ログアウト",destroy_user_session_path,method: :delete,class: "nav-link"%></li><%else%><liclass="nav-item active"><%=link_to"新規登録",new_user_registration_path,class: "nav-link"%></li><liclass="nav-item active"><%=link_to"ログイン",new_user_session_path,class: "nav-link"%></li><%end%>application.css
.nav-link{font-size:0.8rem;}このように、
<%= link_to "リンク名", ***_path, class: "クラス名" %> #=>ここのクラス名cssを適用する
と書く事で、cssが適用されます。
間違ったパターン
僕が間違って書いたダメなパターンも書いておきます。
これではcssが適用されません。
header.html.erb
<%ifuser_signed_in?%><liclass="nav-item active"><%=link_to"ログアウト",destroy_user_session_path,method: :delete%></li><%else%><liclass="nav-item active"><%=link_to"新規登録",new_user_registration_path%></li><liclass="nav-item active"><%=link_to"ログイン",new_user_session_path%></li><%end%>application.css
.nav-item{font-size:0.8rem;}このように書き、
<li class="クラス名"> #=>ここのクラス名にcssを適用しようとしていた
<%= link_to "リンク名", ***_path %>
これではcssが適用されません。
まとめ
かなり初歩的なミスで同じように困る方はいないかもしれませんが、
もし同じような事でお困りの方がいた時の参考になれば嬉しいです。
最後までお読みいただき、ありがとうございました。