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;
}
Related
i sort a column in antd Table component and the entire column takes a default color. The problem is that i have custom css applied on my rows but when i sort them the default color of antd for sort override my custom css. I am writting reactjs
<Table
size='small'
dataSource={this.state.codes}
rowClassName={(record, index) => ((record.package_name===null ? 'disable' : ''))}
columns={[ }]
My own css that applied to all the row is on the rowClassName
What i want is to when i sort a column the default sort css not to be applied and override my custom css.
I have found a solution to my problem, the css selector that is responsible for sort in antd is this td.ant-table-column-sort. So inside my CSS file i have insert this code:
.even > td.ant-table-column-sort {
background-color: transparent;
}
Where even is my custom CSS
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/>
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>
In Material-UI's components you can give a style object for the component itself as an attribute on the JSX tag, but you have to give a separate style object for the underlineFocusStyle for example.
I mean for example TextField component's underlineFocusStyle.
You would style it like:
<TextField hintText="Hint Text" style={{width: '80%'}}
underlineFocusStyle={{backgroundColor: '#0000FF', height: '2px'}}
/>
Now, how to write that in normal css. The styling of that underlineFocusStyle of the component on top of styling the TextField component's style itself?
like, the style for the TextField's width would be of course:
width: 100%
but how the underlineFocusStyle would be styled?
Something like:
width: 100&
.underline-focus-style: background-color: #000FF
Because I'd like to give a style for the component, which has to be written in css. Thank you.
You can apply css styles to underlineFocusStyle and also to any material-ui component. Declare a const style object and add your css like below
const style = {
"background-color": "#fff", color:"#333"
}
and then pass this style object to underlineFocusStyle props like below
<TextField underlineFocusStyle={style} />
Hope this answers your question.
<ion-list radio-group>
<ion-radio name="choiceLng" ng-model="language" value="y" ng-value="'y'" ng-change="langChanged('y')">y</ion-radio>
<ion-radio name="choiceLng" ng-model="language" value="x" ng-value="'x'" ng-change="langChanged('x')">x</ion-radio>
</ion-list>
I created radio buttons using ion-list. I want to change style for childs of
ion-radio which are the input tag and the div. How can I "reach" this input tag and then change css dynamically using angularJs?
You can have default class on all ion-radio element. Then with proper CSS selector you can add style for its content like
.default .item-content {
// To add style to content label along with its background
}
.default .radio-icon {
// To add style to content label tick icon (or to modify it when not shown)
}
Then you can make use of ng-class and check value of ngModel language with its ng-value to apply particular class say selected to that label tag.
In your case it's as follows
<ion-list radio-group>
<ion-radio name="choiceLng" ng-class="{'selected': language === 'y'}" ng-model="language" value="y" ng-value="'y'" ng-change="langChanged('y')">y</ion-radio>
<ion-radio name="choiceLng" ng-class="{'selected': language === 'x'}" ng-model="language" value="x" ng-value="'x'" ng-change="langChanged('x')">x</ion-radio>
</ion-list>
Now here you're using ion-radio static so need to add that ng-class too every option but if you're using ng-repeat on it, it'll be only once just to compare model with ng-value variable.
After along with model change selected class will be added to only selected radio option so you can have CSS for its contents the same way:
.selected .item-content {
// To add style to selected content label along with its background
}
.selected .radio-icon {
// To add style to selected content label tick icon (or to modify it)
}
Working Codepen example to refer.
If you don't want to add additional classes you can add this to you ionic.app.scss file:
label.item.item-radio.ng-valid
border-radius: 400px
margin: 5px 50px 5px 10px