Как оформить ссылку с помощью Styled-Components? - PullRequest
Новая
       100

Как оформить ссылку с помощью Styled-Components?

0 голосов
/ 03 мая 2020

Я пытаюсь изучить Styled Components - это здорово, и все работает потрясающе, но я не могу получить <a> для стилизации

Это мой стиль-компонент из Styled CSS . 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;

1 Ответ

0 голосов
/ 03 мая 2020

Вы должны использовать точки с запятой внутри объекта 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>
  );
}

Заголовки. js

import styled from "styled-components";

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

CodeSandbox

...