I want to override the css of a child vuetify component.
.filterOPV > div > div {
min-height: 30px !important;
}
.filterOPV > div > div > div {
background: #f5f5f5 !important;
}
<v-flex md2 class="filterOPV">
<v-select
:items="sortOPV"
label="Filtre OPV"
dense
solo
/>
</v-flex>
I tried the code above, but nothing changes.
I saw that some people were using Deep Selectors but it doesn't work too.
You can do this via two methods-
Using ::v-deep
<style scoped>
.filterOPV ::v-deep .v-input__control {
min-height: 30px !important;
}
.filterOPV ::v-deep .v-input__slot {
background: #f5f5f5 !important;
}
</style>
Using >>>
<style scoped>
.filterOPV >>> .v-input__control {
min-height: 30px !important;
}
.filterOPV >>> .v-input__slot {
background: #f5f5f5 !important;
}
</style>
Meaningful-
>>> is identical to ::v-deep. The basis for having these two ways is that when you are using pre-compilers, like SASS, they may have problems learning >>> and will fail to compile your CSS. If this occurs, switch to ::v-deep.
You need to use :deep selector
<style scoped>
.filterOPV :deep(.v-input__control) {
min-height: 30px !important;
}
.filterOPV :deep(.v-field) {
background: #f5f5f5 !important;
}
</style>
Related
I am using
<p-steps [model]="items" [(activeIndex)]="activeIndex" [readonly]="false"></p-steps>
in my Angular component. In my component's stylesheet, I am trying to style the p-steps with no luck. When I change the style directly in the browser's developer tools, it works. I even tried to overwrite the style with Angular's
:host ::ng-deep
But it did not work. I want the steps to be aligned vertically, I dont want the border and I want the step numbers to be light grey and the selected step number to be light grey. What I want is the follwing:
:host ::ng-deep .ui-widget, .ui-widget * {
float: none !important;
}
:host ::ng-deep .ui-steps {
border: none !important;
}
:host ::ng-deep .ui-steps .ui-steps-item .ui-state-highlight .ui-steps-number {
background-color: #757575 !important;
}
:host ::ng-deep body .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
background-color: #bdbdbd !important;
}
I have also set
encapsulation: ViewEncapsulation.None
in my component.
Here's the solution. You were missing a ::ng-deep
::ng-deep .ui-widget, ::ng-deep.ui-widget * {
float: none !important;
color: red;
}
.ui-steps {
color: red;
border: none;
}
.ui-steps .ui-steps-item .ui-state-highlight .ui-steps-number {
background-color: #757575;
}
.ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
background-color: red;
}
https://stackblitz.com/edit/primeng-template-jr2vaa
Avoid encapsulation: ViewEncapsulation.None
Avoid using
!important
Start using SCSS
Don't put any custom code in
your parent scss
My Suggestion never override the CSS of any third party library as it is. If you want to override CSS property of any element first use your own class. Then add CSS properties. With the rule of CSS specificity it will override the CSS properties easily without using !important and any other hack.
What I did to solve this issue I have added my own class customestepper and overridden the CSS properties like below:
<p-steps [model]="items" class="customstepper"></p-steps>
and then in styles.css
.customstepper .ui-state-highlight{
background: #343a40;;
}
.customstepper .ui-steps .ui-steps-item.ui-state-highlight .ui-menuitem-link {
color:#fff;
}
Demo: Click to see the demo
Image
you can add encapsulation: ViewEncapsulation.None and try this in your component css:
.ui-widget, .ui-widget * {
float: none !important;
color: red;
}
.ui-steps {
color: red;
border: none !important;
}
.ui-steps .ui-steps-item .ui-state-highlight .ui-steps-number {
background-color: #757575 !important;
}
.ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
background-color: red !important;
}
or delete the encapsulation: ViewEncapsulation.None and put the above css in your global styles.css file.
first way DEMO.
second way DEMO.
I solved it like this (decided not to use the vertical alignment):
body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
background-color: #757575 !important;
}
.ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
background-color: #bdbdbd !important;
}
.ui-steps:before {
border: none !important;
}
I also needed to add the
encapsulation: ViewEncapsulation.None
in my component.
Another solution that works without adding encapsulation is this:
:host ::ng-deep .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
background-color: #757575 !important;
}
::ng-deep .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
background-color: #bdbdbd !important;
}
::ng-deep .ui-steps:before {
border: none !important;
}
Without using
!important
it does not work so far.
I have a project which is split up into the parent app, and several reusable child components in separate repositories. I'd like to define default CSS variables in these child components, which can be overridden by the parent app, however I can't find the right syntax for this. Here's what I've tried:
/* parent */
:root {
--color: blue;
}
/* child */
:root {
--color: var(--color, green);
}
.test {
width: 200px;
height: 200px;
background: var(--color, red);
}
https://codepen.io/daviestar/pen/brModx
The color should be blue, but when the child :root is defined, the color is actually red, at least in Chrome.
Is there a correct approach for this? In SASS you can add a !default flag to your child variables which basically means 'declare if it's not already declared'.
CSS stands for cascading style sheets,
so you cannot override anything by a parent...
The only way is to create a stronger rule.
look at .c1 and .p1
.parent {
--background: red;
}
.child {
--size: 30px;
--background: green; /* this wins */
background-color: var(--background);
width: var(--size);
height: var(--size);
}
.p1 .c1 {
--background: red; /* this wins */
}
.c1 {
--size: 30px;
--background: green;
background-color: var(--background);
width: var(--size);
height: var(--size);
}
<div class="parent">
<div class="child"></div>
</div>
<hr />
<div class="p1">
<div class="c1"></div>
</div>
Thanks to #Hitmands hint I have a neat solution:
/* parent */
html:root { /* <--- be more specific than :root in your parent app */
--color: blue;
}
/* child */
:root {
--color: green;
}
.test {
width: 200px;
height: 200px;
background: var(--color);
}
I would suggest an approach by aliasing the variables in the component and using "parent" or root variables as main value while local value is by !default.
.parent {
--background: red;
}
.child {
--child_size: var(--size, 30px); /* !default with alias */
--child_background: var(--background, green); /* !default with alias */
background-color: var(--child_background);
width: var(--child_size);
height: var(--child_size);
}
<div class="parent">
<div class="child"></div>
</div>
<hr>
<div class="child"></div>
I'm using polymer and I'm thinking this is a but but I'm not entirely sure.
In my main document I have this:
<style is="custom-style">
:root {
--child-element-bg: #000;
--child-element-mixin: {
border: 10px solid #f30;
};
}
</style>
<parent-element>
<child-element></child-element>
</parent-element>
The inside my child element I have this style block
<style>
:host {
background-color: var(--child-element-bg, --some-other-default);
#apply(--child-element-mixin);
}
</style>
Everything works great. However inside my parent-element I have:
<style>
:host {
--child-element-bg: #f30;
--child-element-mixin: {
border: 5px solid #000;
};
}
</style>
My child-element gets the 5px solid #000, But Not the #f30 background-color.
am I doing something wrong? Is this a known bug?
This is not a bug. This is how Polymer has implemented their css variables.
I am using a bootstrap template that has a stylesheet called styles.css. I want to modify the following class in styles.css
.contact {
background-color: #56bc94;
color: #fff;
padding: 80px 0;
}
I created a common.css that I place after styles.css and added the following
.contact {
background-color: #f5f5f5;
padding: 80px 0;
}
However, it's not over-riding the styles.css class. I tried with !important as well, but doesn't work.
.contact {
background-color: #f5f5f5 !important;
padding: 80px 0;
}
In common.css use:
#import url("styles.css");
.contact {background-color: #f5f5f5; padding: 80px 0;}
I am an iPhone App Developer and have very very little knowledge about css.I have a code to create a no of cells.here this is:
<style type="text/css" media="screen">
body {
margin: 0;
width: 320px;
height: 200px;
}
.ad-carousel-view .cells > li {
width: 200px;
height: 70px;
padding-top: 16px;
padding-left: 20px;
color: white;
font-size: 20px;
font-family: "Helvetica Neue", Helvetica;
-webkit-border-radius: 10px;
-webkit-box-sizing: border-box;
background-image:url('13.jpg');
}
.ad-carousel-view .cells > li:nth-child(odd) {
background-color: rgb(255,59,59);
}
.ad-carousel-view .cells > li:nth-child(even) {
background-color: rgb(80,80,80);
background-image:url('13.jpg');
}
.ad-carousel-view .cells > li.active {
background-color: red;
background-image:url('23.jpg');
}
</style>
<style type="text/css">
.wrap{
border:solid 1px #000000;
width:320px;
height:150px;
position:relative;
top:0px;
left:0px;
}
</style>
in the above code the following section is used to set cell's BG color and image
//odd cell
.ad-carousel-view .cells > li:nth-child(odd) {
background-color: rgb(255,59,59);
}
//even cell
.ad-carousel-view .cells > li:nth-child(even) {
background-color: rgb(80,80,80);
background-image:url('13.jpg');
}
//highlighted cell
.ad-carousel-view .cells > li.active {
background-color: red;
background-image:url('23.jpg');
}
now what i need is to change BG image dynamically...i mean instead of using
background-image:url('23.jpg');
i want use variable something like
background-image:url(var);
is it possible in CSS??....if no then can anyone have any idea to dynamically set image name??
It's not possible in pure CSS. You could use Javascript to set the background-image property on load:
jQuery example:
$(document).ready(function(){
$('.ad-carousel-view .cells > li.active').each(function(){
var img = getYourImagePath();
$(this).css({backgroundImage: img});
});
});
You can do this in your HTML if you're using a server-side technology by using an inline style, so on your element you'd have something like:
<li class="active" style="background-image:url(###);"></li>
where you would replace ### with whatever output method you're using to dynamically set the image.
You can also set it with javascript if you don't have any server-side technology to work with:
var obj= document.getElementById('aUniqueId');
obj.style.backgroundImage = yourImage;
jQuery is similar but a little nicer because it can pick up the class instead of just the ID - which would be better if you want to apply more than one active class on the page:
$(".active").css("backgroundImage",yourImage);
Yes this should be fine. Have you tested it? I'm sure it works OK.
The LESS allows you to use variables in the CSS :)
Example:
#brand_color: #4D926F;
#header {
color: #brand_color;
}
h2 {
color: #brand_color;
}