Применить стиль компонента к сторонним компонентам

Question

Я учусь реагировать, и я начал использовать 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 применяется в представлении. Кстати так?

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;

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;