react-router-dom：将带有 css 的变量传递给 NavLink 的 activeStyle 属性？ （感情）

Question

使用 react-router-dom 的 Navlink 的activeStyle属性时，如何将 styles 提取到变量中，这样我就不必一遍又一遍地重复相同的 styles 而不使用 ZC7A628CBA22E28EB616AZF 文件？

理想情况下，我想用Emotion来做到这一点（而不只是做一个styled.Navlink ），但如果这不可能，一个常规变量也可以。

我的文件如下所示：

import { NavLink, useRouteMatch } from 'react-router-dom';
import { css } from '@emotion/react';

const navLinkStyle = css({
   color: blue,
});

const navLinkActiveStyle = { // also tried css({ ... })
  color: 'red',
};

使用以下元素：

   <NavLink
      to='/home'
      // activeClassName='selected' // I imagine this is for pure css styling, not css-in-js.
      css={navLinkStyle} // Emotion css prop
      activeStyle={navLinkActiveStyle} // Does not seem to accept any variable (emotion's or regular)
    >
      Home
   </NavLink>

Answer 1

您可以将所有 styles 分配给 object。

const navLinkStyle = {
        color: 'blue',
        backgroundColor:'green',
        ...etc
    };

并像这样使用这个 object

 <NavLink
  to='/home'
  activeStyle={navLinkStyle} 
>
  Home
</NavLink>