Embedding the Lighten Css Feature to Jsx/React

问题

I currently use the following syntax to embed a state color to jsx.

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

Is there a way to use the lighten feature in css to do something like this?

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

回答1:

You can use SCSS to get backgroundColor: lighten(this.state.color, 15%)

css part

$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;
    }

I posted just an example to how it's work may be it will help you

Working fiddle with scss

来源：https://stackoverflow.com/questions/44512011/embedding-the-lighten-css-feature-to-jsx-react