將Lighten Css特性嵌入到Jsx/React

Question

我當前使用以下語法將狀態顏色嵌入到jsx中。

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

有沒有辦法在css中使用亮化功能來做這樣的事情？

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

Answer 1

您可以使用SCSS獲得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; 
    } 

我張貼只是一個例子，它是如何工作可能它會幫助你

Working fiddle with scss