3

シンプルな Nextjs ボイラープレートをセットアップしていますが、スタイル付きコンポーネントを動作させることができないようです。私のファイルHeader.tsxでは：

// Core Module Imports
import Link from "next/link";
import * as React from "react";

// Styled-Component Imports
import styled from "../theme/theme";

class Header extends React.Component {
    render() {
        return (
            <div>
                <Link href="/about">
                   <a>About Us</a>
                </Link>
            </div>
        );
    }
}

const StyledHeader = styled(Header)`
    width: 100vw;
    height: 10vh;
    background: #2a2c39;
    color: #ff0000;
    link-style: none;
`;

export default StyledHeader;

ご覧のとおり、単純なヘッダー コンポーネントをセットアップし、次に styled() を使用して CSS を定義しました。私のファイルIndex.tsxで：

// Core Module Imports
import * as React from "react";

import StyledHeader from "../components/Header";

class Index extends React.Component {
    render() {
        return (
            <div>
                <StyledHeader />
                <p>Test Change</p>
                <div>Example Div</div>
            </div>
        );
    }
}

export default Index;

明らかに、私は何か間違ったことをしています。なぜなら、それは機能していないからです。誰かが私を正しい方向に向けることができますか?

4

3 に答える 3

2

スタイル付きラッパーが生成されたクラス名を渡すことができるようthis.props.classNameに、のルート要素に渡す必要があります。Header

class Header extends React.Component {
    render() {
        return (
            <div className={this.props.className}>
                <Link href="/about">
                   <a>About Us</a>
                </Link>
            </div>
        );
    }
}
于 2018-03-14T23:15:24.123 に答える