React中如何在行内样式变量中使用CSS linear-gradient渐变？

解决方案 #

React 行内样式中，CSS 函数不需要转为 JS 函数调用，直接把完整的属性值作为字符串传入即可。
你原来的写法存在两处问题：

• 错误把 linear-gradient 当成 JS 函数调用，实际上应该和原生 CSS 写法一致，整体作为字符串赋值给 backgroundImage
• 缺少了 backgroundSize、backgroundPosition 两个配套属性，同时存在多余的分号等语法错误

正确的 tabStyle 写法如下：

let tabStyle = {
  backgroundImage: `linear-gradient(45deg, #808080 25%, transparent 25%), 
    linear-gradient(-45deg, #808080 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #808080 75%),
    linear-gradient(-45deg, transparent 75%, #808080 75%)`,
  backgroundSize: '20px 20px',    
  backgroundPosition: '0 0, 10px 0, 10px -10px, 0px 10px'
}

替换对应代码段后即可正常生效。

内容的提问来源于stack exchange，提问作者MagnusEffect