See code here
I am importing a <button> component that has two span children. These span children are setting a gradient color that I want to override, but I only have access to the parent <button>. Is there a way for me to remove the styling on the children? I am using Tailwind.
Code:
<button className='from-orange-500 to-fuchsia-600'> // I want my button to be this gradient
<span className='from-violet-400 dark:from-violet-400 to-violet-600 dark:to-violet-600'></span> // I want to delete these styles
<span className='from-violet-600 dark:from-violet-600 to-violet-400 dark:to-violet-400'></span> // And these styles
</button>
And the component is being called as follows, which is why I can't target the spans:
<SubmitButton className="bg-gradient-to-l from-orange-500 to-fuchsia-600/>
Related
I need to change a antd form element style i.e label and select, but by changing antd element css (antd-form-item) its changes all the elements associated with it. Adding inline style also doesn't work, also tried creating its own classname but still doesn't work
Just add className to Form.Item component and override it's children css:
<Form.Item className="my-select" label="Select">
<Select>
<Select.Option value="demo">Demo</Select.Option>
</Select>
</Form.Item>
.my-select .ant-form-item-label label {
color: red;
}
i am trying add background color and change the icon color on prev icon and next icon on vuetify slide group prop. if i target the class which i got from console it's not working. but if i remove scoped from my style tag or try to change the color on console style it's working.
.v-slide-group__next.theme--light.v-icon
{
color: rgb(234, 10, 10)!important;
}
I have tried this way but it's not working.how can i style those props icon? thanks in advance.
In order to target the elements with class it's necessary to use <style> without 'scopped', because 'scopped' automatically adds unique hashes in the class selector on each app build. And this prevents targeting Vuetify's elements using this way. I would suggest you to add some class on your wrapper container, let's say class="my-slider" and to target it like this:
<template>
<div>
<v-slide-group class="my-slider">
</div>
</template>
<style>
.my-slider > .v-slide-group__next.theme--light.v-icon
{
color: rgb(234, 10, 10)!important;
}
</style>
I have a component that uses the <ng-content> selector to pull in some content children.
<!-- label-expand component-->
<div>
<ng-content select="[appLabel]"></ng-content>
</div>
So when a component creates an instance of this label-expand component like this:
<label-expand>
<span appLabel>Some label</span>
</label-expand>
I would like to set up the label-expand component, when hovered on to play an animation of the content child with the appLabel directive where the text gets bigger.
#Component({
selector: 'label-expand',
//...,
animations: [trigger('expandLabelState', [
//This is the animation I would like to pass to the content child
])]
})
export class LabelExpandComponent {
#ContentChild(AppLabelDirective) appLabel: AppLabelDirective
}
How do I pass an animation defined with the angular animation metadata in the label-expand component to it's ng-content content child? Or is this a problem that should instead be solved with CSS?
I have div with its own style. I embedded this div on other website.
<div id="scoped-div">
<style>
label {
color: green;
}
</style>
<label> Scoped div </label>
</div>
But I face problem, my div style is overridden by website style. I don't want to use iframe. Except for the use of iframe is there any other way to protect my div style by external style changes?
Your request is exactly what Shadow DOM makes possible:
attach a Shadow DOM to the element you want to protect (here:
#scope-div),
put the HTML code you want to protect in the Shadow DOM,
clone it from a <template> element to get it easy (optional).
That's it!
var div = document.querySelector( "#scoped-div" )
var template = document.querySelector( "template" )
var sh
if ( 'attachShadow' in div )
sh = div.attachShadow( { mode: "closed" } ) //Shadow DOM v1
else
sh = div.createShadowRoot() //Shadow DOM v0 fallback
sh.appendChild( template.content.cloneNode( true ) )
<template>
<style>
label {
color: green;
}
</style>
<label> Scoped div </label>
</template>
<div id="scoped-div">
</div>
There is no way to fully protect your styles. But you can try the following:
Try to specify your elements selectors as specific as possible (e.g. with attributes and IDs)
Use inline styles
Use !important (but be careful with a broad use of importants)
When I create toolbar button in CKEditor 3.0 with following code I need to uncomment icon property to get button visible. Otherwise space is occupied but no label is shown. When I hover over it I get caption popping up.
editor.ui.addButton('customButton', {
label: 'Custom Action',
//icon: this.path + 'images/anchor.gif',
command: commandName
});
Do you know how to create toolbar button without icon? Just a pure text.
An easier way is that CKEditor creates a CSS class on your custom label automatically called:
cke_button_<command>
For example, if your command for the button was called 'myCommand', and you set 'label: 'My Command', then CK would render something like:
<a id="cke_27" class="cke_off cke_button_myCommand" ....>
...
<span id="cke_27_label" class="cke_label">My Command</span>
</a>
Therefore (assuming you are using the 'kama' skin - substitute for your skin if not), you can use the following CSS to override the cke_label ==> display:none
.cke_skin_kama .cke_button_myCommand .cke_label {
display: inline;
}
Voila.
This is how I did it. A button looks like this:
<span class="cke_button">
<a id="cke_..." class="cke_off cke_button_cmd" ...>
<span class="cke_icon"/>
<span class="cke_label">Label</span>
</a>
</span>
.cke_label is styled "display:none" by default. This would do exactly what we want:
<span style="display:none;" class="cke_icon"/>
<span style="display:inline;" class="cke_label">Label</span>
So the selectors are a bit tricky, put this in the Style Tag on the page with the editor:
<style type="text/css">
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_icon{display:none !important;}
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_label{display:inline;}
</style>
The ckeditor authors applied css to get the label on the source button (presets.css):
/* "Source" button label */
.cke_skin_kama .cke_button_source .cke_label
{
display: inline;
}