将样式组件样式应用于第三方组件

IT技术 reactjs react-router-dom styled-components
2021-05-17 16:17:43

我正在学习react，我开始使用styled-components和react-router dom

但是我在将我的自定义样式组件应用于不是由我创建的现有组件时遇到了困难。

这是代码：

import React from "react";
import { NavLink } from "react-router-dom";
import styled from "styled-components";

const NavStyle = styled.div`
  color: red;
  margin: 10px;
`;

const Navigation = () => {
  return (
    <div>
      <NavStyle>
        <NavLink to="/">Home</NavLink>
      </NavStyle>
      <NavLink to="/about">About</NavLink>
      <NavLink to="/contact">Contact</NavLink>
    </div>
  );
};

export default Navigation;

问题是color: red没有应用，而是margin: 10px在视图中应用。为什么这样？

2个回答

您可以简化样式。无需用另一个组件包装链接。简单使用styled-components扩展styled()功能：

import React from "react";
import { NavLink } from "react-router-dom";
import styled from "styled-components";

const StyledNavLink = styled(NavLink)`
  color: red;
  margin: 10px;
`;

const Navigation = () => {
  return (
    <div>
      <StyledNavLink to="/">Home</StyledNavLink>
      <StyledNavLink to="/about">About</StyledNavLink>
      <StyledNavLink to="/contact">Contact</StyledNavLink>
    </div>
  );
};

export default Navigation;

您应该为a标签设置样式：

import React from "react";
import { NavLink } from "react-router-dom";
import styled from "styled-components";

const NavStyle = styled.div`
  margin: 10px;
  a {
    color: red;
  }
`;

const Navigation = () => {
  return (
    <div>
      <NavStyle>
        <NavLink to="/">Home</NavLink>
      </NavStyle>
      <NavLink to="/about">About</NavLink>
      <NavLink to="/contact">Contact</NavLink>
    </div>
  );
};

export default Navigation;
其它你可能感兴趣的问题
上一篇如何阻止光标跳到输入的末尾 下一篇使用样式组件覆盖react组件样式