ons-toolbar-buttonでMaterialDesignを使うと色が透けてしまう事を回避する

序文

事の発端として、現在monacaはonsenui2.0の実装が進んでいるが、β6になってから、挙動がだいぶ変わった。その中でここまで修正ができなかった、ons-toolbar-buttonがmodifierのmaterialが指定しているHEX#26a69aがクリックイベント時に透けてしまう問題を解決する手法を以下に記す。

修正箇所及び修正方法

/components/monaca-onsenui/onsen-css-components.css

の2624行目に記載している、

.toolbar-button-material:activeをstyle.css

等に記載しopacity（透過率設定）上書きする。

具体的な修正方法

修正前

/components/monaca-onsenui/onsen-css-components.css側

onsenui

.toolbar-button--material:active {
  opacity: 1;
  background-color: #26a69a;
}

修正後

css/style.css

onsenui

.toolbar-button--material:active {
  opacity: 0;
  background-color: #26a69a;
}

opacityは透過率の設定で0〜1の間で0.1刻みで設定する。