如何从带有样式组件的反应路由器的链接中删除样式

Question

我正在使用样式组件，但在不同的文件中。我搜索了这个问题并找到了很多答案，但我仍然对如何在我的代码版本中应用它感到困惑。所以，如果会重复，请提前道歉。

文件 Main.jsx：

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

function Main() {
  return (
    <>
      <Router>
        <MainComponent>
          <Menu>
            <Link to="/crypto">
              <HyperLink>Crypto</HyperLink>
            </Link>
            <Link to="/marketplace">
              <HyperLink>Market Place</HyperLink>
            </Link>
          </Menu>
          <Switch>
            <Route path="/crypto" component={Crypto} />
            <Route path="/marketplace" component={MarketPlace} />
          </Switch>
        </MainComponent>
      </Router>
    </>
  );
}

文件 MainElements.jsx：

import styled from "styled-components";

export const MainComponent = styled.div`
  width: 100%;
  height: 100vh;
  background-color: #1e2258;
`;

export const Menu = styled.div`
  display: flex;
  width: 80%;
  margin: auto;
  height: 10vh;
  color: #fff;
  border: 1px solid white;
  align-items: center;
`;

export const HyperLink = styled.p`
  text-decoration: none;

  &:focus,
  &:hover,
  &:visited,
  &:link,
  &:active {
    text-decoration: none;
  }
`;

Answer 1

可以尝试来自 react-router 文档https://reactrouter.com/web/api/Link/component-reactcomponent的示例

只需使用a 标签而不是p 作为链接。

const FancyLink = React.forwardRef((props, ref) => (
  <HyperLink ref={ref} {...props}>{props.children}</HyperLink>
))

<Link to="/" component={FancyLink} />

const CustomLink = ({ ...props }) => <Link component={FancyLink} {...props} />