Question

我正在尝试学习样式化组件-很棒，并且一切都很棒，但是我无法<a>进行样式化

这是我来自StyledCSS.js的样式组件：

...............
export const HeadLink = styled.a`
    color: pink,
    text-decoration: none,
`;
...............

这是我的反应组件

import React from 'react';
import {
    HeadCon,
    HeadLink,
    Container,
    Branding,
    Nav,
    UL,
    LI,
} from './StyledCSS';

function Header() {
    return (
        <HeadCon colorBG="#35424a">
            <Container>
                <Branding>
                    <h1>Acme Web Design</h1>
                </Branding>
                <Nav>
                    <UL>
                        <LI>
                            <HeadLink href="index.html">About</HeadLink>
                        </LI>
                        <LI>
                            <HeadLink href="index.html">Contact</HeadLink>
                        </LI>
                        <LI>
                            <HeadLink href="index.html">Weather</HeadLink>
                        </LI>
                    </UL>
                </Nav>
            </Container>
        </HeadCon>
    );
}

export default Header;

Answer 1

您应该在styled对象中使用分号-而不是逗号。这是一个有效的示例。

import React from "react";
import "./styles.css";
import { HeadLink } from "./HeadLink";

export default function App() {
  return (
    <div className="App">
      <HeadLink href="index.html">About</HeadLink>
    </div>
  );
}

Headlinks.js

import styled from "styled-components";

export const HeadLink = styled.a`
  color: pink;
  text-decoration: none;
`;

CodeSandbox

如何使用样式化组件来样式化链接？

1 个答案: