Trying to change the color of the app's navbar when a certain page is visited. The navbar is defined in the app.component.html file and I am trying to override it in a component's css file.
app.component.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
component.css
:host .navbar{
background-color: orange !important;
}
Expected navbar to change to orange when component is visited. Component in this case is a page in the app.
From the Angular docs, try:
:host(.navbar) {
background-color: orange;
}
You shouldn't need the !important part of the style. Adding the styles in the stylesheet as you have above will scope them very specifically overriding those from the bootstrap stylesheet.
Your app.component is an higher component compared to the other component created, so let your styling be done in your app.component.css
Related
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
This is the expansion title
</mat-panel-title>
<mat-panel-description>
This is a summary of the content
</mat-panel-description>
</mat-expansion-panel-header>
<p>This is the primary content of the panel.</p>
</mat-expansion-panel>
How do I change the mat-panel-description area (and only the mat-panel-description area so it is a different background color (e.g. red)?
I've tried various styles but cannot seem to get the entire background of that particular background to change (while keeping the header and footer their original colors).
Using chrome dev tools, adding a background-color to the following .mat-expansion-panel-body works, e.g.:
.mat-expansion-panel-body {
background-color: red;
}
But this does not work when I try to put this in my stylesheet (or even via inline style).
Note: This also works when I put this in my global stylesheet (styles.css) -- but I want to avoid doing this if possible.
Here is a screenshot where I have a red circle indicating the area I want to change the background-color for.
Thanks
in Angular use /deep/ to change styles for material component to force the style down with Emulated encapsulation without changing the encapsulation, so try this:
/deep/ .mat-expansion-panel-body {
background-color: red;
}
or ::ng-deep since /deep/ is deprecated
::ng-deep .mat-expansion-panel-body {
background-color: red;
}
add encapsulation property into your #Component decorator
encapsulation: ViewEncapsulation.None
and then you can simply add styles in your css file.
.mat-expansion-panel-body {
background-color: red;
}
Hope this helps!!
I ended up solving this using global styles, but using a component-specific class as a parent (to prevent overriding all occurrences of .mat-expansion-panel-body)
I chose this method because I didn't want to use deprecated ng-deep or mess with my component's encapsulation.
expansion-overview-example.component.html
<div class="expansion-overview-example">
<p>This is the primary content of the panel.</p>
</div>
styles.css
.expansion-overview-example .mat-expansion-panel-body {
background-color: red;
}
I have a component nested within a component with a bunch of HTML. In the parent component, I am trying to have the CSS written there apply to the nested component.
Example:
/* this is within the parent css */
button{
color: red;
}
But then in the child the component's button is not red.
I am linking the components like so:
<!-- this is within the HTML of the parent -->
<div>
<nested-component></nested-component>
</div>
You can prepend :host ::ng-deep to achieve this.
:host ::ng-deep button {
color: red;
}
How to set css style on step (Angular material stepper) when mouse hover it? I tried set styles on .mat-step-header and mat-step, also i tried set css class on it, but nothing worked.
Override the CSS like below,
::ng-deep .mat-step-header:hover{
background-color: green;
}
I'm using Bootstrap css as a global style, and then modify it in each component if I need to, in index.htm I have:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
and then in the child I add the style
.nav li a {
padding: 5px 10px;
}
which also overrides the value the parent receives from bootstrap for nav li a, is this considered ok? Maybe I don't really understand the Shadow DOM...
Plunker http://plnkr.co/edit/O2r3zKlYj7SH7FWHvWnT?p=preview
(But you have to launch it on you pc, because I'm not sure how to make "#import '/styles/UIComponent.css';" in customer.component.css work in plunker, this way it imports the css file in header and makes it global. If you change the line to "#import '../styles/UIComponent.css';" (the two dots added) it won't import the whole css, and the emulator will translate it as needed.)
Edit:
It's a bug in current Angular2 beta: https://github.com/angular/angular/issues/6449
This should do what you want
:host .nav li a {
padding: 5px 10px;
}
This way you are limiting the scope of your styles to your child component.
With ViewEncapsulation.None this doesn't work of course because this is about style encapsulation and None disables exactly this.
I am doing my first steps with Bootstrap Twitter, and need to extend components.
For example, I would like to change the navbar background, but without changing the original css file.
I tried to create a new class .test with the new background:
.test{
background-color: red !important;
}
And I've invoked it in the hmtl as:
<div class="navbar navbar-fixed-top test">
But, it doesn't work.
How can do this?
There are a few ways to customize/extend Bootstrap classes which are all discussed here: Twitter Bootstrap Customization Best Practices
If you intend to override the boostrap styles with your own custom CSS you should avoid using !important as this is generally a bad practice.
In the case of the navbar, the element that has the background-color is navbar-inner so you'd want to override like this:
.test .navbar-inner{
background-color: red;
}
Custom navbar example: http://bootply.com/61032
How to extend/modify (customize) Bootstrap 4 with SASS