javascript - 如何使用 Reactjs 中的变量使用 css 渐变？

Question

我想在 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呢？

导航栏代码：

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;

Answer 1

不，您不需要对 css 函数使用 Camelcase 语法，就像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%)";
}

Answer 2

它应该只是"linear-gradient()"一个字符串值backgroundImage:

Answer 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