将Styled Component的样式应用于第三方组件

Question

我正在学习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。为什么会这样？

- Hairi

Answer 1

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

- Kort

---

如果第三方组件具有像下面的滑块一样的样式属性，您知道如何实现吗？<Slider thumbTintColor={${props => props.theme.colors.primary}} minimumTrackTintColor={${props.theme.colors.primary}} maximumTrackTintColor={${props.theme.colors.primary}} />const StyledSlider = styled(Slider)` 这里可以放什么？ - yazmnh87

Answer 2

你应该为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;

- Omid Nikrah

---

我应该怎么知道呢？ - Hairi

@Hairi 因为 NavLink 是一个 a 标签。 - Omid Nikrah