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

Question

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

理想情况下，我想用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

您可以将所有样式分配给一个对象。

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

然后像这样使用这个对象

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