将已设置样式的零部件样式应用于第三方零部件 [英] Apply styled component style to a third party components

问题描述

我正在学习Reaction，我从使用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。为什么？

推荐答案

您可以简化样式。不需要用另一个组件包装链接。简单使用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;

这篇关于将已设置样式的零部件样式应用于第三方零部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！