Question

我正在使用Nextjs，Semantic-UI-React，next-routes和Auth-0

在_app.js文件中，包含Head标记和Layout组件。在_app.js中的Head标记下注入的语义.min.css链接似乎无效。完全不使用css样式。

我的解决方法是用Layout组件包装其他所有页面，并将Head标记注入到Layout组件内。但是，我更喜欢在_app.js中应用Layout wrapper组件和Head标签，因此不必在每个页面中都应用它们

有人知道如何解决这个问题吗？谢谢

_app.js

 export default class MyApp extends App {
  static async getInitialProps(c) {
    const pageProps = await App.getInitialProps(c);
    return { ...pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <Layout>
        <h2>Test</h2>
        <Head>
          <title>CyberCoin</title>
          <meta
            name="viewport"
            content="initial-scale=1.0, width=device-width"
          />
          <link
            rel="stylesheet"
            href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
          />
        </Head>

        <Component {...pageProps} />
      </Layout>
    );
  }
}

index.js

export default class Auth extends Component {
  render() {
    return (
      <div>
        {auth0.isAuthenticated() && (
          <div>
            <Link route="/main">
              <a className="item">Main</a>
            </Link>
          </div>
        )}
        {!auth0.isAuthenticated() && (
          <div>
            <Link route="/about">
              <a className="item">About</a>
            </Link>
          </div>
        )}
        {!auth0.isAuthenticated() && (
          <div>
            <Button onClick={auth0.login} primary>
              Authorize
            </Button>
          </div>
        )}
        {auth0.isAuthenticated() && (
          <div>
            <Button onClick={auth0.logout} primary>
              Exit
            </Button>
          </div>
        )}
      </div>
    );
  }
}

main.js

class CampaignIndex extends React.Component {
  static async getInitialProps() {
    const campaigns = await factory.methods.getDeployedCampaigns().call();

    return { campaigns };
  }

  renderCampaigns() {
    const items = this.props.campaigns.map(address => ({
      header: address,
      description: (
        <Link route={`/campaigns/${address}`}>
          <a>View Campaign</a>
        </Link>
      ),
      fluid: true
    }));

    return <Card.Group items={items} />;
  }

  render() {
    return (
      <div>
        <div>
          <h3>Open Campaigns</h3>
          <Link route="/campaigns/new">
            <a>
              <Button
                floated="right"
                content="Create Campaign"
                icon="add circle"
                primary
              />
            </a>
          </Link>
          {this.renderCampaigns()}
        </div>
      </div>
    );
  }
}

export default CampaignIndex;

未使用Nextjs _app.js应用语义UI响应

0 个答案: