button_to に思った通りの CSS が効かない問題の対処法

事象

button_to という Rails のヘルパーメソッドを使って送信ボタンを実装するときに下記のように実装すると button_to に思った通りの CSS が効きませんでした。今回はその原因と対処法を共有いたします。

<%= button_to '送信',
              任意の_path,
              method: :post,
              params: { key: 'value' },
              class: 'custom-class' %>

原因

この問題の根本原因は button_to ヘルパーが生成する HTML 構造にあります。具体的には、指定した class (custom-class) が form 要素ではなく、内部の input 要素に適用されてしまうためです。Rails は button_to を使用すると、以下のような HTML を生成します。

before

<form class="button_to" method="post" action="指定したパス">
  <input class="custom-class" type="submit" value="送信">
  <input type="hidden" name="authenticity_token" value="..." autocomplete="off">
  <input type="hidden" name="key" value="value" autocomplete="off">
</form>

この構造では、custom-class クラスが input 要素に直接適用されており、form 要素自体には適用されていません。

対処法

問題を解決するためには、form 要素にも CSS クラスを適用する必要があります。これを実現するには、button_to メソッドの form オプションを使用して、form 要素にクラスを指定します。以下のように修正します。

after

<%= button_to '送信',
              任意の_path,
              method: :post,
              params: { key: 'value' }, 
              class: 'custom-class',
              form: { class: 'form-custom-class' } %>

この変更により、form 要素に form-custom-class のクラスが適用され、input 要素には引き続き custom-class クラスが適用されます。これによって、期待通りのスタイルを button_to に適用することができます。

まとめ

button_to ヘルパーメソッドを使用する際に CSS スタイルが期待通りに適用されない問題は、form と input 要素に適切なクラスを指定することで解決できます。

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！
また、なにか間違ってましたらご指摘いただけますと幸いです！