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
Related
When I import my css file between style tags, it changes everything.
Why it is happening? How can I fix this problem?
I already used 'scoped 'feature but it is not working.
for instance
// in styles.css file
h1 { color: red; }
// in component file
<template> ... </template>
<script> ... </script>
<style scoped>
import './styles.css';
<style>
When I run server, it changes every h1 tags in project. I am using 'scoped' how can it happen.
Try with SCSS instead of CSS:
<style lang="scss" scoped>
#import './styles.css';
</script>
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';
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.
I am using webcomponents-lite (Polymer) to create webcomponents.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="/static/js/util.js"></script>
</head>
<body class="dark">
<main>
<edsp-login-form></edsp-login-form>
</main>
</body>
</html>
<edsp-login-form> is defined in js file where it uses lit-html. The definition as follows:
#Define('edsp-login-form', {
style: ``
})
export class Login extends LitComponent {
render() {
return html`
<link rel="import" type="css" href="styles.css">`
<div></div>
}
}
In this code, how do apply css classes from styles.css to a component <edsp-login-form> ?
Option 1: If you're using Shadow DOM, you can't apply external CSS to your component. A solution is to deactivate the Shadow DOM by implementing this in your component:
createRenderRoot() {
return this;
}
Option 2: If you still want to apply external CSS and use Shadow DOM, you can use CSS variables. In your external CSS you can instance the variable using something like:
name-of-your-component-tag {
--variable-name-color: #FFF;
}
and then in your component, you can use the CSS variable:
.my-class {
color: var(--variable-name-color);
}
Option 3: And if you're trying to apply a dark theme, you can use the CSS inside of your component considering the context. In your component you can use CSS like:
:host-context(.dark) .bg {
background: #000;
}
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.