Try as I might, I can't seem to get Next.js to recognize its own Head information. It recognizes the title, but that's all. Neither the meta data or favicon make it to render. This is a single page application. Am I doing something obviously wrong here?
import React from 'react';
import App from '../components/App';
import Head from 'next/head';
class Index extends React.Component {
render() {
return (
<div>
<Head>
<title>My page title</title>
<link rel="icon" type="image/ico" href="../public/assets/favicon.ico"/>
<meta property="og:title" content="My page title" key="title" />
</Head>
<App></App>
<style>
{`
html, body, #__next {
margin: auto;
margin-top: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #282c34;
width: 100%;
height: 100%;
overflow: hidden;
}
`}
</style>
</div>
)
}
}
export default Index;
Partially figured it out myself. Turns out it was a combination of google chrome not wanting to update its cache, and not understanding how to use href="/image.ico". It was unclear to me that the "/" was rooted to the "public" directory. Luckily, my favicon works now. However, I seem to have broken the title in the process.
Related
I know about this method of injecting CSS:
import Head from 'next/head'
export default function Home() {
return (
<div className="container">
<style jsx global>{`
body {
margin: 0;
}
`}</style>
<Head>
<title>audiom</title>
<link rel="icon" href="/favicon.ico" />
</Head>
</div>
)
}
But is there a way to quickly insert a css file (css reset in my case)?
You can import reset.css in _app.jsx file, it will apply css reset styles for all pages.
_app.tsx
import '../styles/reset.css';
I am trying to display an image on a mock webpage I'm building as a background image. When I try using the css background-image and url it will not load. I am trying to put the image as a background image on the header section under the header class, but it just won't load. Whne I hover over the path in brackets it brings up a thumbnail of the image, so I know it can access it.
I have tried everything - moving the file, renaming the file, checked my paths are correct, using and removing quote marks, backslashes, forward slashes, checking my css path is correct in my head section, checking the file extension. When I click on the file name in the console 'sources' section and select open in new window it brings the image up in a new window just fine, but Chrome or any other browser won't seem to load the file for some reason?!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
}
header {
background-image: url(resources/img/table_window.jpg);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
<title>Phil My Glass</title>
</head>
<body>
<header>
<div class="top-section">
</div>
</header>
</body>
</html>
The file loads and displays just fine if I put it into the HTML using an img tag, but won't display from css.
You just need to specify a height for your header - as it was just defaulting to 0 pixels high :-)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
}
header {
background-image: url(https://picsum.photos/200/300);
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
<title>Phil My Glass</title>
</head>
<body>
<header>
<div class="top-section">
</div>
</header>
</body>
</html>
I have a very simple project in NextJs. I want to serve the files via NginX
These are my dependencies.
"dependencies": {
"isomorphic-unfetch": "^2.0.0",
"next": "^7.0.2",
"next-routes": "^1.4.2",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"semantic-ui-react": "^0.80.2"
}
My routes js
const routes = require('next-routes')();
module.exports = routes;
I have a common layout for entire application as shown here. Note the style jsx
import React from 'react';
import { Container } from 'semantic-ui-react';
import Header from '../components/header';
import Head from 'next/head';
const Layout = (props) => {
return(
<Container style={{margin:'30px', 'backgroundColor':'#fff','borderRadius': '5px'}}>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>
<meta charSet="utf-8" />
<style jsx global>{`
body {
background: #202020;
font: 11px;
}
div.container {
margin: 30px;
padding-bottom: 2px;
}
`}</style>
</Head>
<Header />
<div className='container'>
{props.children}
</div>
</Container>
);
};
export default Layout;
All other pages would use this layout.
render() {
return(
<Layout>
<div>
my app
</div>
</Layout>
);
}
With Dev server, layout's styled jsx is getting applied properly. everything works just great.
If i do, npm run build & export and use the out content for static hosting, styled jsx is completely missing.
I also found that the out directory has index.html which is NOT serving the css. If use the index/index.html css is fine.
Again what is the right approach?
You need to put the <style jsx> tag outside <Head>. Basically all styled-jsx styles need to be a children element of the root.
Here's the working example
Simply download it (by clicking at the middle-top-left - there is a button to download).
<Container>
<Head>
...
</Head>
<div className="container">{props.children}</div>
<style jsx global>{`
body {
background: #202020;
font: 11px;
}
container {
margin: 30px;
padding-bottom: 2px;
}
`}</style>
</Container>
Here's some other useful info about styled-jsx that might help you better manage the styles:
Dynamic Styles
External Styles
Styles outside components
Also take into account that styled-jsx is not the only CSS-in-JS library out there. I personally prefer styled-components, you should check it out. Here's an example on how to implement it with Next.js.
Cheers
My index.js for React, I used a create-react-app starter project.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
My app.js includes:
import './App.css';
and I use the CSS:
.body {
background-color: "green"
}
and the body does not change to green.
How do I modify CSS? I also tried placing app.css into public/app.css and loading with link rel="stylesheet" Element inspector still showed no effect.
Element inspector shows margin of 8px on body element from "user agent stylesheet".. nothing from my loaded css.
EDIT:
I also try inline style tag:
<!doctype html>
<html lang="en">
<script src="web3.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>CryptoClicker</title>
</head>
<body>
<div id="root"></div>
</body>
<style>
.body {
background: "green";
}
</style>
</html>
no effect.
You're using .body which is looking for elements with the class 'body' - as there's a . Change that to body (with no .) and it'll style the body element rather than the class.
Also, named colours in CSS are not variable strings - so remove the quotes:
body {
background: green;
}
It'd be worth putting your styles back into App.css and importing it in JS rather than using the <style> tags.
I want some flexibility in my css style block so i decide to inject some server side code, f.e.
#defaultGameContainer {
position: relative;
width: #(SiteConfig.Instance.Game.Width + "px");
height: 600px;
top: 100px;
left: 50%;
margin-left: -480px;
}
But it seems not work, i have a error in VS like 'unexpected characters sequence...'
Are we restricted to use Razor syntax in css?
Thanks.
Actually, you can add a custom CSS block for a specific .cshtml View by following these instructions:
First off, Define in the .cshtml view your custom CSS block
#section CustomCSS{
<style>
#floorsList > tbody > tr > td {
vertical-align: middle
}
</style>
}
Then, you need to embed this CustomCSS section in _layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Your Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#RenderSection("Styles", false)
<!--Consider the following line -->
#RenderSection("CustomCSS", required: false)
</head>
<body>
</body>
</html>
css/js files are not parsed by mvc razor views engine
you can create CssController (be sure you don't have Css folder in project directory) which returns plain text
controller:
public class CssController : Controller
{
[OutputCache(Duration = 6000, VaryByParam = "l")]
public ActionResult generatecss()
{
return View("generatecss");
}
}
view: generatecss.cshtml
#{ Layout = ""; }
#defaultGameContainer {
position: relative;
width: #(SiteConfig.Instance.Game.Width + "px");
height: 600px;
top: 100px;
left: 50%;
margin-left: -480px;
}
put it in layout as stylesheet
<link href="~/Css/generatecss" rel="stylesheet"/>
I believe you can use LESS Css for .NET http://www.dotlesscss.org/
Thanks you guys! All you suggest is just fine!
And at the end of experimenting i found that it works even with those annoying VS warnings.
So we can just mix c# with css just in <style>...</style> block in main _layout.cshtml and ingore those warnings.