如何使用 Reactjs 中的变量使用 css 渐变？答案

【问题标题】：How to use css gradient using a variable in Reactjs?如何使用 Reactjs 中的变量使用 css 渐变？
【发布时间】：2021-12-20 15:04:44
【问题描述】：

我想在 Navlink 组件中使用以下 css 属性。在 CSS 文件中，属性可以写成如下所示，使用gradient。

.ele {
       background-image:
       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%);

       background-size:20px 20px;    
       background-position:0 0, 10px 0, 10px -10px, 0px 10px;
}

虽然使用 in react 将它们作为变量 tabStyle 如下所示，我知道：

background-size 更改为 backgroundSize
background-image 更改为 backgroundImage
background-position 更改为 backgroundPosition

但是我们如何使用linear-gradient？

NavbarJs 代码：

import React from "react";
import { NavLink, useLocation } from "react-router-dom";

const NavbarComponent = () => {

let location = useLocation();

let tabStyle = {
   backgroundImage:
   linearGradient('45deg', '#808080 25%', 'transparent 25%'), 
   linearGradient('-45deg', '#808080 25%', 'transparent 25%'),
   linearGradient('45deg', 'transparent 75%', '#808080 75%'),
   linearGradient('-45deg', 'transparent 75%', '#808080 75%');

  }

return (
  <>
    <nav variant="pills" className="navbar" style={{ borderBottom: "1px solid white" }}>
      <ul className="nav nav-pills">
        <li>
          <NavLink style={location.pathname === "/" ? tabStyle:{}} to="/">Home</NavLink>
        </li>
        <li>
          <NavLink style={location.pathname === "/about" ? tabStyle:{}} to="/about">About</NavLink>
      </li>
      <li>
        <NavLink style={location.pathname === "/articles-list" ? tabStyle:{}} to="/articles-list">Articles</NavLink>
      </li>
    </ul>
  </nav>
</>
 );
};

export default NavbarComponent;

【问题讨论】：

标签： javascript css reactjs react-hooks css-gradients

【解决方案1】：

不，你不需要对 linear-gradient 这样的 css 函数使用 Camelcase 语法，只需使用一个简单的字符串

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%)";
}

【讨论】：

这不起作用:(
只有当我有单个 linear-gradient 行时它才有效

【解决方案2】：

它应该只是"linear-gradient()"作为backgroundImage:的字符串值

【讨论】：

只有当我有单个linear-gradient 行时它才有效
如果您将所有线性渐变都放在一个用逗号分隔的字符串中，它是否有效？
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%)"; } 喜欢这个？或者甚至可能没有逗号，只有空格。

【解决方案3】：

快速浏览一下，您传入的样式对象似乎存在语法错误。尝试类似

export default function App() {
  const styles = {
    background: `
      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%)
    `
  };

  return (
    <div className="App" style={true ? styles : {}}>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

在我的密码箱中工作：https://codesandbox.io/s/optimistic-edison-nqynx?file=/src/App.js

【讨论】：