将 Lighten Css 功能嵌入到 Jsx/React

【问题标题】：Embedding the Lighten Css Feature to Jsx/React将 Lighten Css 功能嵌入到 Jsx/React
【发布时间】：2017-11-14 16:07:44
【问题描述】：

我目前使用以下语法将状态颜色嵌入到 jsx。

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

有没有办法使用 css 中的 lighten 功能来做这样的事情？

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

【问题讨论】：

标签： css reactjs jsx

【解决方案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

【讨论】：