jsx中的线性渐变css

Posted 2023-02-22

【中文标题】jsx中的线性渐变css

【英文标题】：linear-gradient css in jsx

【发布时间】：2019-01-08 19:46:46

【问题描述】：

我从某个地方下载了一个模板并试图将其转换为一个反应组件，但我被困住的一件事是，我无法得到 linear-gradient 在这个 css 中的用途，我该如何修改它以 jsx 内联样式工作。

let component = React.createClass(
  render: function() 
    return (

      <div className="container" style=boxSizing: 'border-box', width: 600, height: 340, margin: '0 auto', position: 'relative', WebkitPerspective: 1000, MozPerspective: 1000, perspective: 1000, MozTransform: 'perspective(1400px)', msTransform: 'perspective(1400px)', WebkitTransformStyle: 'preserve-3d', MozTransformStyle: 'preserve-3d', transformStyle: 'preserve-3d', WebkitPerspectiveOrigin: 'right', MozPerspectiveOrigin: 'right', perspectiveOrigin: 'right'>
        <div className="card" style=boxSizing: 'border-box', width: 600, height: 340, boxShadow: '0 27px 55px 0 rgba(0, 0, 0, .7), 0 17px 17px 0 rgba(0, 0, 0, .5)', position: 'relative', WebkitTransform: 'rotate(0deg)', MozTransform: 'rotate(0deg)', msTransform: 'rotate(0deg)', transform: 'rotate(0deg)', WebkitTransformOrigin: '100% 0%', MozTransformOrigin: '100% 0%', msTransformOrigin: '100% 0%', transformOrigin: '100% 0%', WebkitTransformStyle: 'preserve-3d', MozTransformStyle: 'preserve-3d', transformStyle: 'preserve-3d', transition: '.8s ease-in-out'>
          <div className="front" style=boxSizing: 'border-box', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'white', WebkitBackfaceVisibility: 'hidden', MozBackfaceVisibility: 'hidden', backfaceVisibility: 'hidden', display: 'flex', WebkitJustifyContent: 'center', justifyContent: 'center', WebkitAlignItems: 'center', alignItems: 'center', zIndex: 2, WebkitTransform: 'rotateY(0deg)', MozTransform: 'rotateY(0deg)', msTransform: 'rotateY(0deg)', transform: 'rotateY(0deg)'>
            <div className="logo" style=boxSizing: 'border-box', width: 200, height: 200, position: 'relative', background: 'linear-gradient(45deg, #F5AF69 50%, #F4EED7 50.9%),
  linear-gradient(90deg, #FC5135 50%, #4E203C 50%),
  linear-gradient(-45deg, #F5AF69 50%, #E8D9A0 50.9%), 
  linear-gradient(#FC5135 50%, #4E203C 50%),
  linear-gradient(-45deg, #F5AF69 50%, #E8D9A0 50.9%),
  linear-gradient(90deg, #FC5135 50%, #4E203C 50%),
  linear-gradient(45deg, #FC5135 50%, #F5AF69 50.9%)', backgroundSize: '50px 50px, 100px 50px, 50px 50px, 200px 100px, 50px 50px, 100px 50px, 50px 50px', backgroundRepeat: 'no-repeat', backgroundPosition: '0 0, 50px 0px, 150px 0, 0 50px, 0 150px, 50px 150px, 150px 150px'><span style=boxSizing: 'border-box', display: 'block', background: '#4E203C', width: 29, height: 32, position: 'absolute', top: '99.5px', left: 130, borderRadius: '0 50% 50% 0' /></div>
          </div>
          <div className="back" style=boxSizing: 'border-box', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'white', WebkitBackfaceVisibility: 'hidden', MozBackfaceVisibility: 'hidden', backfaceVisibility: 'hidden', WebkitTransform: 'rotateY(-180deg)', MozTransform: 'rotateY(-180deg)', msTransform: 'rotateY(-180deg)', transform: 'rotateY(-180deg)', fontFamily: '"Arimo", sans-serif'>
            <h1 style=boxSizing: 'border-box', color: '#FC5135', textTransform: 'uppercase', fontWeight: 400, lineHeight: 1, marginTop: 110, textAlign: 'center', fontSize: 40>Helen Parker<span style=boxSizing: 'border-box', color: '#4E203C', display: 'block', fontSize: '.45em', letterSpacing: 3>design <i style=boxSizing: 'border-box', fontStyle: 'normal', textTransform: 'none', fontFamily: '"Playfair Display", serif'>&amp;</i> photography</span></h1>
            <ul style=boxSizing: 'border-box', margin: 0, width: '100%', listStyle: 'none', position: 'absolute', bottom: 30, left: 0, padding: '0 1%'>
              <li style=boxSizing: 'border-box', width: '31.3333333333%', margin: '0 1%', float: 'left', padding: 10, border: '2px solid #FC5135', borderRadius: 4, position: 'relative', textAlign: 'center', color: '#4E203C'>[phone]</li>
              <li style=boxSizing: 'border-box', width: '31.3333333333%', margin: '0 1%', float: 'left', padding: 10, border: '2px solid #FC5135', borderRadius: 4, position: 'relative', textAlign: 'center', color: '#4E203C'>[e-mail]</li>
              <li style=boxSizing: 'border-box', width: '31.3333333333%', margin: '0 1%', float: 'left', padding: 10, border: '2px solid #FC5135', borderRadius: 4, position: 'relative', textAlign: 'center', color: '#4E203C'>my-site.com</li>
            </ul>
          </div>
        </div>
      </div>
    );
  
);

【问题讨论】：

你的 sn-p 没有运行

@AKASHPANDEY 的意思是您问题中的 sn-p 不起作用。以下是关于 sn-ps 及其使用方法的说明：***.blog/2014/09/16/…

有人可以编辑它以使其工作，因为我无法弄清楚，如何使反应 sn-p 工作

@MoshFeu 将此 sn-p 添加到仅用于查看目的，因为其中没有可运行的内容。我的代码没有运行，因为这里有“线性渐变”的东西，可以看看这个并告诉我这个问题，以便我可以修复它。

@Rizvan 你有没有找到解决办法？

【参考方案1】：

如果你想使用内联样式，你可以这样做：

<div style=backgroundImage: 'linear-gradient(to right, #439bfd, #73b3fb)'...