I am using vue js's ELEMENT UI. And i want to override its style. I can do it with global style. But scoped style doesnt work. When i used global style it changes my all pages design. but i want to do it just for one page.
Here is my style(global style. and this is working):
<style>
.el-icon-close:before{
content: "Back" !important;
}
</style>
but when i used scoped it doesnt work:
<style scoped>
.el-icon-close:before{
content: "Back" !important;
}
</style>
Is there any idea about this?
The scoped keyword means that this the changes to the style will apply only to the elements in the current scope. Meaning all custom made elements in the page. If you want to access elements "created" somewhere else you will have to skip the scoped keyword. The code that is in the scoped tag will apply only for the current page/view else it will apply for all pages/views.
All not scoped elements usually are style in the App.vue file. If you want to apply style of element that is not scoped just wrap it in a div add the class to it and style it in the scoped tag:
<style scoped>
.my-custom-div{
.el-icon-close:before{
content: "Back" !important;
}
}
</style>
Atleast that is working with me.
You must use custom class:
.custom-class{
smthng goes here...
}
This is achievable with Deep selectors
For your use case:
<style scoped>
.parent-div /deep/ .el-icon-close:before{
content: "Back" !important;
}
</style>
Related
My problem does not appear to be solvable by using traditional ways of conditional styling, like [ngStyle] or [ngClass]. I want to conditionally define a CSS-selector using :host ::ng-deep, for example:
<style *ngIf='preventXScroll'>
:host ::ng-deep .p-datatable-wrapper {overflow-x: hidden !important;}
</style>
But doing it this way always applies the style, regardless of the actual state of preventXScroll. Any ideas?
Actually, the problem can be solved via [ngClass].
Template:
<div class='outer-wrapper' [ngClass]='{"prevent-x-scroll": preventXScroll}'>
<p-table>
...
</p-table>
</div>
Stylesheet:
:host ::ng-deep .prevent-x-scroll .p-datatable-wrapper {
overflow-x: hidden !important;
}
This way the style is only applied to p-datatable-wrapper (within p-table child component) while it is contained in prevent-x-scroll.
I am using vuejs-datepicker in one of my vue project. I want to hide the default input and show the Calendar when user press a button. I am trying to have the <datepicker/> inside a div apply css for the div so that I can hide it.
<div class="datePickerDiv">
<datepicker class="date" ref="datepick"></datepicker>
</div>
<style scoped>
.datePickerDiv {
position: relative;
float: left;
margin-top: -40px;
}
.datePickerDiv input {
border: none;
background: transparent;
}
</style>
But its not working as I expect. Sample https://codesandbox.io/s/relaxed-sea-qfuix?file=/src/components/HelloWorld.vue:742-910
You need to use the >>> combinator in order to deeply select the input tag:
.datePickerDiv >>> input {
border: none;
background: transparent;
}
This is because you're using the scoped attribute on your style tag. scoped will only work to apply styling to child components directly referenced in your current Vue component. In this case, datepicker is creating its own child input which will not be affected by the style, unless you use the deep selector shown above.
For applying style in your date picker tag, use input-class instead of only class. The styling does not work on the default scoped style tags, so add another style tag beneath your scoped style tag like follows:
<style scoped>
---your scoped Styles ----
</style>
<style >
-- Apply your unscoped style over vue date picker here ---
</style>
Example
<datepicker input-class="date" ref="datepick"></datepicker>
<style>
.date {
display: none !important;
}
</style>
Add prop input-class with class hide-input. This will apply the hide-input class to the input element. Read more about props here.
<datepicker input-class="hide-input"></datepicker>
.hide-input{
display: none !important;
}
I've just hit a wall with custom-style. Unfortunately it seems that any mixins and variables are applied to descendants of elements matched in the Light DOM. On the other hand the :root selector applies the vars and mixins to all custom elements.
Isn't there a middle ground where it would be possible to style eg. any custom element that has a given class etc? For example I would like to have
<style is="custom-style">
my-element.important {
--border-color: red;
}
</style>
To set the variable for each instance of <my-element> withe the given class. Currently it only works for elements in the Light DOM (for document level style) and Local DOM (when setting variables/mixins inside other element). It also doesn't work for anything like :root my-element or :root /deep/ my-element or html /deep/ my-element
I've prepared a reproduction on Plunker.
The solution is quite simple, as pointed out by #lozandier and Karl on Polymer's Slack channel.
For document-level styles the property groups must be wrapped in with :root selector
<style is="custom-style">
:root {
my-element.important {
--border-color: red;
}
}
</style>
And for style inside element it's necessary to use :host instead
<dom-module>
<template>
<style>
:host {
my-element.important {
--border-color: red;
}
}
</style>
</dom-module>
</template>
So I've got style.css which defines all my CSS classes. But I want to redefine a class for an entire page without modifying style.css. I know I could override the CSS properties by using the style attribute on each element, but I don't want to do that.
So let's say I've got the class colortext defined in style.css with color:blue; but I want it to be color:red; for one entire page. How can I accomplish this?
You could always place a
<style type="text/css">
.colortext { color: red; }
</style>
in your HTML document somewhere inside the <head> tag... however I'd recommend simply adding a rule to your stylesheet, if possible.
Now define your body id and do this css as like this
<body id="home">
<p class="red">hello</p>
</body>
Css
#home .red{
color:red;
}
add style tag top of your head closing tag and create same class add each element with !important
.old_class{
color: new_value !important;
}
Override is an option
* { color:red !important; }
This isn't a good way, ( but, I thought it sounded like he was implying he didn't wan't to use ids or classs )
I have a twitter widget which is loaded into the footer of my page. The problem is that it uses !important properties all over the place. And because my stylesheets are all loaded into the head, the widget's style sheets automatically override any of mine.
Do I really have to put a couple of separate styles in the footer of my document, below the widget, to get force this. Or is there a more semantic method?
I would go through and see if there is a way to make your CSS more specific than the selectors used in twitter. The rules of specificity will ensure that your !important styles override the twitter !important styles.
Otherwise, as a last resort and if !important is only used on classes in the Twitter CSS then you could assign an id to anything that is overridden to ensure that your selectors are more specific.
/* your style */
#anti_twitter a.link {
color: blue !important;
}
/* twitter style */
a.link {
color: red !important;
}
So using the code above, the links would come out blue.
JSFiddle: http://jsfiddle.net/9T9uk/
<div id="myWrapper">
<div id="theDefaultId">
....
</div>
</div>
and you can use #myWrapper #theDefaultId { anything: value !important; }
theDefaultId is the id which the twitter widget uses and #myWrapper is an id defined by us.
This should work.