I use semantic-ui-react and emotion in a create-react-app app.
My emotion css gets overwritten, e.g. the below semantic-ui Item color is the default semantic one.
The emotion class is created but the semantic one is in a higher priority. How can I change that (ecxcept writing !important all the time)?
<Item
className={css`
background-color: #333333;
&:hover {
background-color: #e5e5e5;
}
`}
>
Related
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.
In my react project, I styled the buttons like this in an external stylesheet file called project.css:
button {
max-width: 150px;
margin: 20px 0;
padding: 12px 20px;
border-style: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
outline: none;
-webkit-appearance: none;
}
This has been working fine, however I recently installed some libraries that also use buttons. My button style that you see above, is interfering with the style the libraries use.
I was wondering how I could keep my button styles, but have the libraries I use ignore my custom button styles.
Is this doable?
Thanks!
Depending on the structure of your code and the libraries code there are a few options.
Load the library styles after your own. When two selectors have the same specificity the last one loaded applies.
Scope your selector under a parent selector unique to your application
.mycode button {
...
}
Migrate your selector to a class instead of targetting the button tag.
.mybutton {
...
}
In general its more flexible to target a custom css class than the tags themselves.
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.
I want to edit my pagination CSS with this following CSS:
<style>
.ngx-pagination a{
margin: 0 3px ! important;
color: #9B9B9B ! important;
font-weight: bold ! important;
border: solid 1px #ccc ! important;
border-radius: 4px ! important;
text-decoration: none ! important;
}
</style>
but I don't know why after running my angular project and inspecting my browser I get this selector on my css [_ngcontent-c3]
why angular adding this unnecessarily selector by itself? I dont know how to remove this
_ngcontent-c# attributes are added when you use ViewEncapsulation.Emulated - which is default.
Angular uses these attributes to target specific elements with the styles. The number c is sort of a unique identifier of the host component. For example, if you have two components with the following templates:
ComponentA
<span></span>
<comp-b></comp-b>
ComponenB
<h1></h1>
Angular will mark all elements with styles inside component A as _ngcontent-c0 and all elements with styles inside component B with _ngcontent-c1:
<comp-a>
<span _ngcontent-c0></span>
<comp-b _ngcontent-c0>
<h1 _ngcontent-c1></h1>
</comp-b>
</comp-a>
This happens due to emulated view encapsulation. See more here angular.io/guide/component-styles#view-encapsulation
To remove this, use:
encapsulation: ViewEncapsulation.None
in the component decorator function. However, this will remove the encapsulation of your css components. In other words, your css will not be independent and it can be affected by other styles.
I have a question dealing with Angular Material theming, specifically the MatFormField directive. Probably around Material v6, I found that the matFormField directive has new options such as appearance="fill" and appearance="outline", I have found the appearance="fill" useful, but I'd like to know how to change the background color, of the fill being used.
I have tried a few approaches such as,
<input class="w-100 bg-white form-control" #tileFilter
[formControl]="filterBy"
[matAutocomplete]="spiritilesAutocomplete"
[matChipInputFor]="chipList"
placeholder="Search by... Keyword, Author, Title, Story, etc."
>
I've also tried selecting
mat-form-field .mat-form-field-flex{
background-color: white;
}
and many other variations of selecting and styling mat-form-field in particular, but I cannot find the css selector nor, an api reference to the background color in the documentation. I see that Material allows theming of the underlined portion and the label, but I would like to target specifically the background-color. Could anyone please point me in the right direction.
In this case, use ng-deep in your component css file.
::ng-deep {
.mat-form-field .mat-form-field-flex{
background-color: white;
}
}
You need to add !important to the background-color value in order to make it work:
.mat-form-field-flex {
background-color: white !important;
}
you can try :
::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
background-color: #fff;
}