I have drop-down in vue component and class of that element is "form-control" and it has it's own styles. I need to override the styles of that class. for that I have done coding as follows (in vue component),
<style scoped>
.form-control{
border-radius: 50px !important;
color: #823F98 !important;
border: 1px solid #3FA294 !important;
}
</style>
but this one didn't work for me. so, how to override it?
Thank you!
Using unscoped style can be very dangerous especially general class names like form-control.
I think it's a better way to use deep styles in your parent component:
<style scoped>
>>>.form-control{
border-radius: 50px !important;
color: #823F98 !important;
border: 1px solid #3FA294 !important;
}
</style>
but if you can refactor your child component and add a props like formControlStyle with your CSS styles would be the best solution to avoid side effects. You can add a default value to this prop that is your styles in your child component.
You should remove scoped. If you leave scoped it will not apply on other components including those you import.
Or move that css in app.css or app.scss.
Use Deep Selector, ie, :deep(.whatever-style-name) you want to override in your current component
<style scoped>
:deep(.form-control) {
border-radius: 50px;
color: #823F98;
border: 1px solid #3FA294;
}
</style>
by doing this, you can remove the need to use '!important' in every line of css codes that needs overiding.
Refer here in the Vue official docs for more info.
Related
I'm working on a React project and I have button that is in Link (react-router dom). So to edit the css of the button i need to add "a." before the class:
<Link to={'/Register'} className="btn">Sign up</Link>
In the css:
a.btn {
background-color: var(--lighter-hover-color);
color: white;
padding: 10px 25px;
margin: 15px 0;
border: none;
cursor: pointer;
border-radius: 20px;
border: 1px solid var(--hover-color);
text-decoration: none;
}
So when i try to add hover function to this class:
a.btn :hover {
transform: scale(1.2);}
Nothing happens. So my question is is there any way i can make the hover to work. The problem i found is that when i have dot (.) , that makes the hover function unusable.
It is not working because you can not target Link react component using a tag.
I would just get rid of a.btn and just use btn:hover.
A better and more elegant approach to style react elements is to user either styled-components or css modules.
refer this article to learn more about different ways of styling react app
https://css-tricks.com/different-ways-to-write-css-in-react/
Goal: Have CSS only affect the component its on, not others. I only wanted to affect my dropdown, not other text entry fields:
Background/Problem: I understand why it would affect multiple items on the same page (mat-form-field's). But don't understand why it would affect OTHER pages. I looked into it but still unsure.
What I tried:
For example, I originally had:
::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
height: 40px !important
}
::ng-deep .mat-form-field-infix {
padding-top: 1px !important;
padding-bottom: 2px !important;
}
But it was affecting the spacing of all form-fields on the page, so I edited it to be:
::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
height: 40px !important
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding-top: 1px !important;
padding-bottom: 2px !important;
}
Other unchanged CSS:
.title-container {
position: relative;
margin-top: 8px;
}
.language-field {
position: absolute;
right: 0;
top: 0;
margin-top: -16px;
width: 115px;
height: 20px !important;
}
This fixed that, but it is still odd to me that changing something on login.component.css would affect all other pages in the site such as profile.component.css
Here is associated HTML for login.component:
<div class="title-container">
<mat-card-title class="text-center">
Please Sign In
</mat-card-title>
<form [formGroup]="_siteForm">
<mat-form-field class="language-field" appearance="outline">
<mat-select (selectionChange)="changeSite($event)" [value]="languages[i].value">
<mat-option *ngFor="let language of languages" [value]="language.value">
{{language.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</form>
</div>
When I researched into this:
I found some SO articles (such as Angular 2+ : Component style keeps affecting other components) mentioning using encapsulation: ViewEncapsulation
However, when looking through the site, I don't see this used anywhere, however there is css on different components that all mention mat-form-field but with different values. This seems like it would indicate that encapsulation is not needed.
In regular HTML I did not use to have these problems, but am confused on how this is working in Angular. Does this have something to do with Angular being a SPA?
I think it's your ::ng-deep, remove that.
Then use a specific class name and declare it in that components css file.
e.g. in home.component.css
.mat-form-field-flex {
height: 40px !important
}
It's slightly hard to grasp what you're trying to show here without a code snippet with that CSS.
But if it's breaking Angular's view encapsulation which all components have by default, I'd be almost positive it's because you're using !important selectors, these should really only be used in the rarest of situations - https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
The reason for this is because using !important will break the css specificity Angular uses to encapsulate it's components.
Css specificity works like so.
Inline styles are worth 1000pts
Id's are worth 100pts
Classes are worth 10pts
Elements are worth 1pt
The !important is essentially worth infinite points it always takes precedence.
div>p>.className = 12pts
div>p>#classname = 102pts
This means that any styles in
div>p>#classname
will take priority over any styles in
div>p>.classname
I won't go into details here about how Angular achieves there encapsulation with this technique, if your interested here's a good article - https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html
Ensure you haven't set encapsulation to ViewEncapsulation.None
#Component({
selector: "my-component",
templateUrl: "./my-component.html",
styleUrls: ["./my-component.scss"],
encapsulation: ViewEncapsulation.None
})
I also got the same problem. You are using ::ng-deep. ::ng-deep is a global level element it affect all the component. So, use :host as prefix. :host will contain the ::ng-deep in the same component. It won't allow it to affect other components. Use this :host ::ng-deep. Replace all ::ng-deep with :host ::ng-deep.
Vuetify v-app-bar has default css classeses v-toolbar__content and v-toolbar__extension that adds 16px padding on x-axis and 4px on y-axis that I want to get rid of.
I have tried overriding these classes in my css like below
.v-toolbar__content {
padding: 0px !important;
}
But it doesn't work. Anybody aware of some trick that would help get rid of the padding in v-app-bar?
In scoped styles, you cannot access child components directly. You need to use deep selector like this.
/deep/ .v-toolbar__content {
padding: 0px !important;
}
Or if you want to target using child selector, you can do:
.parent-class >>> .v-toolbar__content {
padding: 0px !important;
}
I recommend modifying the vuetify SCSS variables.
According to the v-toolbar API we can modify $toolbar-content-padding-y and $toolbar-content-padding-x in our variables style file.
$toolbar-content-padding-x: 0;
$toolbar-content-padding-y: 0;
If you haven't configured a variable file, please follow the SASS variables guide.
I'm new to CSS. Ive created a Drupal site and playing with the theme.
I have some breadcrumb stuff that I would like to theme. If I go into Firebug and turn off the CSS properties
background
border-color
border-style
in the below code
.breadcrumbs .inner {
background: none repeat scroll 0 0 #EFEFEF;
border-color: #929292 #E2E2E2 #FFFFFF;
border-style: solid;
border-width: 1px;
color: #8E8E8E;
}
I get the text looking exactly how I want it.
If I now go into my style.css which is inheriting the code and post
.breadcrumbs .inner {
border-width: 1px;
color: #8E8E8E;
}
The formatting I don't want is retained. If I specify .breadcrumbs .inner in the style.css does that not set it up again and override what was specified higher up the cascade?
If that is not the case how do I stop the inheritance without changing the other style sheet?
Thanks,
Andrew
Additional Info
Here is what I have at the moment
This is what I want to have
You're overriding CSS does not replace the 3 styles you want to change, so the original ones are maintained. What you likely want to do is have your style.css set something like this:
.breadcrumbs .inner {
background: none;
border-color: transparent;
border-style: none;
}
If you specify the CSS styles for same classes twice the resulting style is a union of the attributes defined in both classes. To remove the previous styles you have to redefine the attributes.
If for example you have these css attached to your html document
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/posts.css">
if you have the same class say .color defined in the both default.css and posts.css files, you would imagine that that last css file will be used, but it can be ignored if you write it like so:
// default.css
.color {
color: blue !important;
}
// posts.css
.color {
color: green;
}
// In this example the colour would be blue.
Using !important on inherited style forces inherited style to be used, if you want to override the inherited style then you can simply add !important to post.css
// default.css
.color {
color: blue !important;
}
// posts.css
.color {
color: green !important;
}
// In this example the colour would be green.
Now both are viewed as important and the last one will be used.
Why does the following anchor tag has text underlined?
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none;
}
<a class="pagerLink" href="#">test</a>
Probably because another style block has better precedence than your pagerLink class. Try:
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none !important;
}
use text-decoration:none for a in your styles
Ex:
<head>
<style>
.pagerLink
{
background-color: #E4F5F8;
border:1px solid #C0DEED;
}
.pagerLink a
{
text-decoration:none !important;
}
</style>
</head>
<body>
<div class="pagerLink">
test
</div>
</body>
You can use firebug(a firefox plugin) to findout which style is being used for the element now and whether its being overwritten by some other style definition
http://getfirebug.com/
I cant yet leave comments and I respect this is an old question but be extremely careful when using !important in your declarations:
text-decoration: none !important;
You'll probably get away with it in smaller projects but with any non-trivial project that involves collaboration from multiple sources this sort of thing can be incredibly annoying when it over-rides a property I need to set further down the line. Not only do I have to change this to make my fix stick but I also have to check that changing it does not break anything else, which it probably will.
Better is to refactor your declaration or restructure your code so that you dont need to use !important and only fall back to !important when you cant.
To remove underline you need to follow following style code snippet.
.pagerLink{
background-color: #E4F5F8;
border:1px solid #C0DEED;
text-decoration:none !important;
}