Lighten Css機能をJsx/Reactに埋め込む

Question

現在、以下の構文を使用してjsxに状態色を埋め込みます。

<div className="preview-box" style={{backgroundColor:this.state.color}}> 

このようなことを行うには、CSSのlighten機能を使用する方法はありますか？

<div className="preview-box" style={{backgroundColor: lighten(this.state.color, 15%)}}> 

Answer 1

あなたはbackgroundColor: lighten(this.state.color, 15%)

CSSの一部に

$awesome-blue: #2196F3; 
$width: 100%; 
$height: 500px; 

    .box { 
     background: lighten($awesome-blue, 10%); /* As your need */ 
     width: $width; 
     height:$height; 
     display:flex; 
     align-items:center; 
     justify-content:center; 
    } 

を取得するためにSCSSを使用することができ、私はそれが仕事は、それはあなた

Working fiddle with scss

役立つかもしれだかにちょうど例を掲載