React 将 'px' 附加到 stop-opacity css 值

Question

我有一个呈现线性渐变 svg 标签的 JSX：

return (
  <linearGradient id={props.name} x1={x1} y1={y1} x2={x2} y2={y2}>
    <stop offset='0%'
      style={{
        stopColor: props.color,
        stopOpacity: 0.3
      }}
    />
  </linearGradient>
);

渲染时，React 会自动将 'px' 附加到停止不透明规则的值，该值无效 CSS。

<linearGradient x1="0%" y1="100%" x2="0%" y2="0%">
  <stop offset="0%" style="stop-color:#FDDE90; stop-opacity:0.3px;"></stop>
</linearGradient>

我该如何预防？

Answer 1

您应该将 stopOpacity 添加到 css 样式列表中，它们是数字但不包括 "px"。在 React 源代码中，搜索 isUnitlessNumber 以找到列表。

React 将 'px' 附加到 stop-opacity css 值

React appends 'px' to stop-opacity css value

reactjs

react-jsx