Я использую Nextjs, Semantic-UI-React, next-route и Auth-0
. В файле _app.js содержатся тег Head и компонент Layout. Ссылка semantic.min.css, которая вставляется под тегом Head в _app.js, похоже, не работает. Стиль CSS не применяется вообще.
Мой обходной путь - обернуть все мои другие страницы компонентом Layout, а тег Head вставляется внутри компонента Layout. Однако я предпочитаю применять компонент оболочки Layout и тег Head внутри _app.js, поэтому мне не нужно применять их на каждой странице
Кто-нибудь знает, как решить эту проблему? Спасибо
_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;