For CSS in my nextjs project I am using styled-jsx (https://github.com/vercel/styled-jsx).
All styled JSX tags (<style jsx>) will be appended at the end of the HTML <head> element.
However I have another native (non styled-jsx) HTML <style> tag that contains several CSS overrides. If I place my <style> tag in the nextjs <Head> component it will be placed in the HTML <head> element but above the other styled-jsx style tags. This will cause that the other styled-jsx <style jsx> tags will override my styles defined in my normal <style> tag. I want to achieve the other way around.
import Head from 'next/head';
<Head>
<style dangerouslySetInnerHTML={{ __html: props.css }} />
</Head>
I already tried to put my style tag outside of the <head> element but this is no option for me right now.
How can I put my native HTML <style> tag at the end of the HTML <head> element so other styles will be overridden?
If you are still looking for an answer:
My styles were overriden by styles like Bootstrap so I was also facing your problem.
In the end I decided to override the order in next/head by overriding next.js-Sourcecode.
This is the file you might need to override:
https://github.com/vercel/next.js/blob/canary/packages/next/pages/_document.tsx
You have to move {head} down.
After some research I decided to use a npm-module named patch-package. https://www.npmjs.com/package/patch-package
It's straight forward and allows you to create a patch for the nextjs-Sourcecode.
Related
In order to style a next js app, do I really have to import styles from "./stylesheet.css" and add class with className={styles.aClassName}?
if so, what if I want to style an element by Id or TagName?
Is there a way to style like a normal react app? ie. import "./stylesheet.css" & className="aClassName".
You can add global stylesheet.
You can also place your stylesheet.css in the public folder and refer to it from any component.
<Head>
<link href="/stylesheet.css" rel="stylesheet" type="text/css" />
</Head>
Then you can use the className="stylename" format anywhere in your component.
I am using TinyMCE React with fullpage and code plugins enabled to create email templates. I am trying to insert a <style /> with custom css classes defined inside the <head />. But every time I reload the component, the <style /> is being stripped out. Here is a simplified exampled:
...
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
Is this scenario supported? I have looked at a number of similar issues such as this. They seem to suggest the use of the valid_children option. As I understand, this option allows the inclusion of "invalid" tags inside parent tags. But <style /> inside <head /> is valid.
Any help would be greatly appreciated
Without knowing more about how you have TinyMCE configured it is very hard to say what is causing this issue. I am certainly able to load a style in the head of a document managed by TinyMCE as shown in this TinyMCE Fiddle:
http://fiddle.tinymce.com/cPgaab/2
How is your TinyMCE configured? If you update this fiddle to use your configuration is the style no longer kept?
Is it possible to apply an external CSS to a component in AngularJS1?
And if so - how?
I could find only examples which apply inline css...
AngularJS component's template is nothing different then a regular HTML template. So including the CSS in one of the standard ways should work.
Inside of the HTML of your template use:
<link rel="stylesheet" type="text/css" href="theme.css">
Where theme.css will be replaced with the absolute path to your external CSS.
Polymer has support for <style is="custom-style"> which allows you to define styles that only apply to elements, e.g. the shadow DOM.
Polymer also has support for <dom-module id="shared-styles"> which allows you to package a set of style declarations that can be imported into an element definition.
Thus the point of both of them seems to be to allow you to style a polymer element. Why would you use one over the other? The use cases overlap substantially, it seems.
Additional confusion: shared-styles can be imported into custom-style. Why would you do this? Why not?
A <dom-module id="my-shared-styles"> declares a reusable style module hat you can import into elements or <style is="custom-style"> tags.
Use in a custom element
<dom-module id="my-element>
<template>
<style include="my-shared-styles"></style>
...
</template>
</dom-module>
or in the <style> tag outside a custom element (for example in <head>)
<head>
<style is="custom-style" include="my-shared-styles"></style>
</head>
<style is="custom-style"> is only required when you want to use Polymer CSS features (CSS variables and mixins) in a style element that is not inside a <dom-module>. Inside <dom-module> just <style> is enough.
So it's not supported to have:
...
<body>
<link rel="stylesheet" type="text/css" href="theme.css">
...
but what's the consensus with being able to do:
...
<body>
<style>
#import '/custom.css';
</style>
...
style tags and link rel should be within the head tags but that does not mean it won`t work inside body or divs. its just not good practice
#import '/custom.css';
should be placed only inside css files
Yes, you can have an #import rule at the start of a style sheet even when the style sheet appears as the content of a style element.
However, neither style nor link elements are allowed within body, only within body, according to the formal rules of HTML. These rules are not enforced in practice; the elements work just as they do inside head. (Division into body and head is really just formal.)