ボタンパーツの中のclassNameの指定方法には以下のような変わり種も存在します。
<Button className={"basic-button-box pickup"} modifier="large" onClick={props.click}>{props.text}<div className="right-arrow-box"><i class={props.svg} icon={{default: props.defaultSVG}} style={{color: "#fff", fontSize: "28px"}}></i></div></Button>
/*画像付きボタンののレイアウト*/
.basic-button-box ons-button{
width: 320px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 20px !important;
padding: 4px 0px !important;
}
.basic-button-box .pickup{
background: #f50057;
}
cssで二つのセレクタ(ボタンの基本レイアウトと色を決めるセレクタ)を設定しておいて
後からclassNameで “basic-button-box pickup”と後から付け足すようにpickupと書くと
pickupで指定した色に変化してくれます。
つまり、pickup以外にも色ごとにセレクタを追加すればその指定したclassNameのボタン
のみ色が変わってくれるようになります。
