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

您应该为#content { height: 100%; background-color: lightgrey; background-attachment: fixed; /* THIS DOES NOT WORK */ margin: auto; width: 80%; } #sidebar { margin-top: 10%; text-align: right; position: fixed; bottom: 0; float: left; width: 34%; height: 70%; } #page { float: right; width: 54%; }标签设置样式：

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

2 个答案: