如何在 React 中使用单色制作渐变背景？

Posted 2023-02-22

【中文标题】如何在 React 中使用单色制作渐变背景？

【英文标题】：How to make a gradient background in React with single color?

【发布时间】：2018-10-24 07:32:09

【问题描述】：

我想为 React 中的组件制作渐变背景，如下图所示

Gradient of the same colour

我想这样做：<Box colour ="blue"></Box> 这些组件的样式会像这样

backgroundColor="this.props.colour"

现在我只想传递颜色道具，我不想传递两种颜色，颜色也会是十六进制代码。

【问题讨论】：

就我而言，您链接的图像是两种颜色之间的渐变（大致从红色到橙色）...

是的，它是两种颜色（橙色、浅橙色）之间的渐变，但我想使用橙色的单一原色来制作它。

【参考方案1】：

您仍然需要以某种方式指定第二种颜色。您可以传入第一种颜色，然后可能计算组件中的第二种颜色。在这里，我将第二种颜色转换为比输入颜色深 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>

【参考方案2】：

为什么不使用渐变作为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>