Quiero usar la siguiente propiedad css en el componente Navlink. En el archivo CSS, la propiedad se puede escribir como se indica a continuación, que usa 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; }

Mientras uso en reaccionar tomándolos como una variable tabStyle como se muestra a continuación, sé que:

• cambios background-size de fondo a backgroundSize
• background-image de fondo cambia a backgroundImage
• cambios background-position de fondo a backgroundPosition

pero, ¿cómo podemos usar linear-gradient ?

Código 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;