I'd like to get the CSS file content of a component.
For example:
hello-world.component.ts:
#Component({
selector: 'app-hello-world',
template: `<h1>Hello World</h1>`,
styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent {
getCSSContent(){
}
}
hello-world.component.css:
h1 {
color: red;
font-weight: 400;
}
I expect getCSSContent function to return:
h1 {
color: red;
font-weight: 400;
}
In the folder 'src' add a new file with following name:
typings.d.ts
with the following content:
declare module '*.css';
In your component add:
import helloWorldCss from './hello-world.component.css'
and you can read your css with
getCSSContent(){
return helloWorldCss;
}
I recognized some weird text at the end of the helloWorldCss variable.. maybe you have to trim it.
Related
in an Angular application I have a component with <ng-content></ng-content>. I added the scss rules for content that will be put inside the ng-content, but they are ignored. I tried to solve using :host, but it doesn't work.
https://stackblitz.com/edit/angular-ewqhzj
Wrapper component:
<app-embed>
<p>Hello world!</p><h1 class="toBeColored">toBeColored</h1>
</app-embed>
Styles in embed component:
:host {
border: 5px solid red;
padding: 15px;
display: block;
.toBeColored {
color: pink;
}
}
The problem is that the pink color of 'toBeColored' string is not set
Try this
:host ::ng-deep{
border: 5px solid red;
padding: 15px;
display: block;
.toBeColored {
color: pink !important;
}
}
and remove encapsulation statement and try ti build
encapsulation: ViewEncapsulation.Native
Try adding encapsulation: ViewEncapsulation.Native to your embed component like
import { Component, OnInit, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'app-embed',
templateUrl: './embed.component.html',
styleUrls: ['./embed.component.scss'],
encapsulation: ViewEncapsulation.Native
})
export class EmbedComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
You can't achieve that with a clean way.
A workaround would be to create global css :
:host {
...;
::ng-deep .toBeColored {
color: pink;
}
}
But it will be deprecated. See this issue
::ng-deep is going to hold the web record for long-lived deprecated API.
You should be able to apply the styles in the parent component that projects the content into the ng-content tag. The angular styles isolation appears to consider the content to be part of the component where the HTML is declared.
https://stackblitz.com/edit/angular-ivy-q9dn68
I'm trying to style the :slotted elements in a component from the static styles property as recommended in the docs.
static get styles() {
return [
css `
::slotted(*) {
color: var(--white, #fff);
font-family: "Open Sans", sans-serif;
}
`,
// more styles...
]
}
But for some reason, is getting no effect.
Instead if define the same style in a style element into the render() function it works as expected
<style>
::slotted(*) {
color: var(--white, #fff);
font-family: "Open Sans", sans-serif;
}
// more styles...
</style>
I'm not sure if this is expected (and why) or if this is a bug.
Seems to be a syntax problem in my example. I was using an style array.
This is working fine
static get styles(): CSSResultArray {
return [
css`
:host {
/* styles */
}
::slotted(span) {
/* styles */
}
`,
css`
:host([data-type="primary"]) button {
/* styles */
}
`
];
}
I added a PrimeNG confirmation dialog (followed the example from the official doc):
component.html
<p-confirmDialog appendTo="body" #cd>
<p-footer>
<button type="button" pButton class="btn btn-primary btn-normal mr-4" label="Print or save" (click)="cd.accept()"></button>
<button type="button" pButton class="btn btn-default btn-normal ml-2" label="Skip" (click)="cd.reject()"></button>
</p-footer>
</p-confirmDialog>
component.ts:
import { ConfirmationService } from 'primeng/api';
#Component({
selector: 'xxx',
templateUrl: './xxx.component.html',
styleUrls: ['./xxx.component.scss'],
providers: [ConfirmationService]
})
constructor(private _confirmationService: ConfirmationService) { }
// I am trying to simplify the code
// this method is called successfully
this._confirmationService.confirm({
message: 'Please print or save the confirmation details before continuing.',
header: 'Confirmation details',
accept: () => {
this.navigatetoPaymentApp();
}
});
angular.json:
"styles": [
"node_modules/primeng/resources/primeng.min.css",
"src/styles/main.scss"
],
app.module.ts:
import {BrowserModule} from '#angular/platform-browser';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
#NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
//...
],
//...
})
export class AppModule { }
And I got this:
The expected result is like this:
Issues:
1. missing out-of-box styling from primeng (e.g. darken background)
2. missing close window cross icon
Is there anything missing?
Ideas?
Thanks in advance!
Eventually I found the issue. It's because the CSS styles are coming from the prime theme. e.g. add "node_modules/primeng/resources/themes/nova-light/theme.css" to angular.json for the styles list.
So I implemented the following classes with specific properties:
.ui-confirmdialog.ui-dialog {
width: 34em;
background-color: white;
& .ui-dialog-titlebar {
padding: .5em 0.667em;
font-family: xxx;
font-size: 1.3125rem;
font-weight: bold;
color: orange;
}
& .ui-dialog-content {
padding: 1em;
}
}
Additionally, I need to add this to darken the background (I drew some wisdom from the theme.css files from primeNG:
body .ui-widget-overlay {
background-color: #424242;
opacity: 0.7;
filter: alpha(opacity=70);
}
Note: the class ui-widget-overlay is pretty much empty if theme is not applied.
So I'm just starting to learn React and I'm trying to incorporate a css file to style a react component (ie a sidebar) but I'm not sure why none of the styles show up on the webpage. I've tried inlining css in the index.js file and that works but I'm trying to move all of the styling code into a css file. I have a sass loader and css loader installed and included them in the webpack.config.js file. Am I just forgetting something dumb?
Here's my style.css file
.sidebar {
position: fixed;
height: 200px;
font-size: 20;
width: 60px;
background-color: deepskyblue;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: azure;
}
li {
display: block;
color: gray;
padding: 8px;
font-size: 20;
text-decoration: none;
}
li :hover {
background-color: forestgreen;
}
And my index.js file
import React from 'react'
import {styles} from './style.css'
import Home from './home.js'
export class Sidebar extends React.Component {
render() {
return (
<div className={styles.sidebar}>
<ul>
<li>Home</li>
<li>Test1</li>
<li>Test2</li>
</ul>
</div>
)
}
}
no need to call styles.sidebar as if it were an object, just import the file and assign className as an ordinary class....
import './style.css';
// [...]
<div className='sidebar'>
You mentioned you have CSSLoader in your webpack.config.js file. First, let's confirm that you have something similar to me:
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
Now, every time you run your webpack server, the dev bundle will include your styles in it. With that, you should be able to import css files my referencing them in the React file:
import './MyComponent.css'
const MyComponent = () => {...};
If everything is still the same, but things are still not working, I highly recommend create-react-app, which is a painless solution for you to focus on learning React without bothering so much with configuration details. Create React app includes amongst other things, CSS importing and Jest testing.
I've got this in a global style.css:
:root {
--font: {
font-family: "Source Sans Pro", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
... and this in a react component's style.css:
.rightnav {
#apply --font;
float: right;
color: white;
}
In the component itself:
import React from "react"
import cssModules from "react-css-modules"
import style from "./style.css"
render() {
return (
<ul>
<li className={style.rightnav}>Blog</li>
</ul>
)
}
I get an error: No custom properties set declared for font.
You've got to import the global stylesheet into the local one. Because postcss-apply has no way to know about that global file while parsing the local one. So it's a good idea to have a partial with only custom properties and custom property sets declarations.
You probably want something like postcss-import
#import 'path/to/variables.css';
.rightnav {
#apply --font;
float: right;
color: white;
}