チェックボックスの色をラベルと同じにする[bootstrap4]

Growiでは、チェックボックスにラベルと同じ色にする独自の仕様を施している。

scssで繰り返しを描く時は@eachを記載する。(Sass：eachやforを使って繰り返し記述する手間を省く external_link）

color, backgroundcolor,border-color.transitionなどそれぞれ指定。

_reboot-bootstrap-theme-colors.scss

@each $theme-color, $color in $theme-colors {
  .custom-checkbox-#{$theme-color} {
    .custom-control-label::before {
      border-color: $input-border-color;
      transition: 0.3s ease-in-out;
    }
    .custom-control-input:checked + .custom-control-label::before {
      background-color: $color;
      border-color: $color;
    }
    .custom-control-input:checked + .custom-control-label::after {
      color: $bgcolor-global;
    }
    .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
      color: $bgcolor-global;
      background-color: $color;
      border-color: $color;
    }
    .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
      color: $bgcolor-global;
      background-color: $bgcolor-global;
      border-color: $input-focus-border-color;
    }
  }
}

<input>タグにはcustom-control-input
<label>タグにはcustom-control-label

inputとlabelを囲む<div>タグには、custom-control,custom-checkbox,そして (custom-control-{themecolor}←GROWI独自仕様)を指定してあげることで、ラベルと同じ色のチェックボックス にすることができる。

UserManagement.jsx

  //divにはcustom-control custom-checkbox custom-checkbox-{themecolor}
  //ここではprimaryを指定
  <div className="custom-control custom-checkbox custom-checkbox-primary mr-2">
  
    //inputにはcustom-control-input
    <input
      className="custom-control-input" 
      type="checkbox"
      id="c1"
      checked={adminUsersContainer.isSelected('all')}
      onClick={() => { this.handleClick('all') }}
    />
    
    //labelにはcustom-control-label
    <label className="custom-control-label" htmlFor="c1">
      <span className="badge badge-primary d-inline-block vt mt-1">All</span>
    </label>
    
  </div>

custom-checkbox-{themecolor}には、下のようにBootstrapで定められているテーマを指定することができる。 テーマ~Bootstrap4移行ガイド⤴︎より external_link

参考文献：とほほのBootstrap 4入門 external_link