Как сделать градиентный фон в React с одним цветом?

Question

Я хочу сделать градиентный фон для компонента в React, как показано на рисунке ниже

Градиент того же цвета

Я хочу сделать это как: <Box colour ="blue"></Box> где стили для этих компонентов будут похожи на

backgroundColor="this.props.colour"

Теперь я просто хочу пропустить цветовую опору, я не хочу пропустить два цвета, и цвет будет в шестнадцатеричном коде.

Answer 1

Почему вы не используете градиент как слой выше background-color, чтобы достичь этого:

.box{
  height:200px;
  width:200px;
  background:linear-gradient(rgba(250,0,0,0.5),transparent);
  background-color:orange /*this your primary color*/
}

<div class="box">
</div>

Answer 2

Вам все равно нужно указать второй цвет как-то .Вы можете передать первый цвет, а затем, возможно, рассчитать второй цвет в компоненте.Здесь я конвертирую второй цвет, чтобы он был на 20% темнее, чем входной цвет.

Вы можете настроить логику в соответствии с вашим конкретным вариантом использования.

class App extends React.Component {
  render() {
    return (
      <Box color1="#FFA500" />
    );
  }
}

const Box = ({color1}) => {
  const rgb = [color1.substring(1,3), color1.substring(3,5), color1.substring(5,7)];
  const color2 = `rgb(${rgb.map(c => (parseInt(c, 16) * 0.8)).join()})`;
  return (
    <div className="box" style={{background: `linear-gradient(${color1}, ${color2})`}} />
  );
}

ReactDOM.render(<App />, document.getElementById("app"));

.box {
  width: 100px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>