Mac의 로컬 환경에 의해 Rails 튜토리얼을 진행하고 있는 경우, 14.2.4 [Follow] 버튼(기본편)에서 Unfollow 버튼의 배경이 회색으로 표시되지 않는 문제가 발생했습니다.

검색 결과로서는, Bootstrap의 사양인지 큰 문제도 없는지, 보고 사례가 적고, 원인도 해결 방법도 모릅니다.

　단, 이대로는 보기 좋지 않기 때문에, 다음과 같이 대처했기 때문에, 참고 정보로서 기재합니다.

※추신
향후 잠시 Bootstrap을 돌볼 것이라고 생각하므로, 원인이 판명되면 갱신합니다.

<대처법>

Bootstrap의 설정을 계승한 새로운 class인 [btn-secondary]를 추가한다.
배경의 색은 「#BBBBBB」의 부분을 수정하는 것으로 변경 가능하다.

[app/assets/stylesheets/custom.scss] 
・
・
・
/* button :[btn]の色が動作しないため追加 */
.btn-secondary {
  @include button-variant($btn-default-color,
                          #BBBBBB,
                          $btn-default-border);
}

[app/views/users/_unfollow.html.erb] 
<%= form_for(current_user.active_relationships.find_by(followed_id: @user.id),
             html: { method: :delete },
             remote: true) do |f| %>
  <%= f.submit "Unfollow", class: "btn btn-secondary" %>
<% end %>

<참고 정보>

○ 스크린샷

네 개의 화면 중 위 화면에서 다음 클래스를 적용했습니다.
1. class: "btn"
2. class: "btn btn-primary"
3. class: "btn btn-default"
4. class: "btn btn-secondary"※상기 대처법으로 작성

○ 동작 확인

<Unfollow 버튼의 class 설정 확인>

・class: "btn"※Rails 튜토리얼 거리
→ 버튼의 레이아웃이 된다.
　→[hover]에 의한 배경의 동작 없음.
→색이 그려지지 않는다.

・class: "btn btn-primary"
→Follow 버튼과 같은 묘화가 된다.

・class: "btn btn-default"
　→[background-color]는 흰색 그대로.
　→[hover] 때는 회색이 된다.

· class: "btn-default"또는 class: "btn-primary"
　→[btn]보다 클릭할 수 있는 범위가 작아진다.

<프로덕션 환경 확인>

· Chrome [macOS, Windows7]
· Safari [macOS]
→ 모두 로컬 환경과 동일한 동작이다.

<기타>

· IDE (Cloud9)로 만든 sample_app를 복제
・Rails 튜토리얼 공식 사이트에 있는 「CODE SAMPLE」을 클론
→ 모두 이번에 작성한 sample_app와 같은 동작이다.

○ 참고 사이트

· htps : // 놀라운 l. 코 m / 쿠에 s 치온 s / 147020
· htps : // 기주 b. 코 m / 야 s s b
　→이 문제의 보고 사례
· htps //w w. w3s 쵸오 ls. 코 m / 보오 tst 등 p / 보오 tst 등 p_re f_css_ 부톤 s. 아 sp
　→동작 확인대로의 묘화인 것을 확인
· htps : // 기주 b. 코 m / twbs / 보오 tst 등 p p
　→사용 Gem의 리포지토리