I am using Nextjs, Semantic-UI-React, next-routes and Auth-0
In the _app.js file contains both the Head tag and the Layout component. The semantic.min.css link which is injected under the Head tag in _app.js doesn't seem to work. The css styling is not applied at all.
My workaround is to wrap all my other pages with the Layout component and the Head tag is injected inside the Layout component. However, I prefer to apply the Layout wrapper component and Head tag inside _app.js so I need not apply them in every page
Anyone knows how to resolve this? Thanks
_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;