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
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 look for a simple way to save the color of a row, after clicking on another row
My mat-row
<tr mat-row *matRowDef="let row; columns: ['favicon', 'name', 'quality', 'created_at', 'report', 'edit']"
(click)="selectedRow = selectedRow === row ? null : row" [ngClass]="{ 'selected': row === selectedRow }">
.ts
selectedRow
css
.selected {
background-color: red!important;
}
.mat-row:nth-child(even){
background-color: #e4f0ec;
}
.mat-row:nth-child(odd){
background-color:#ffffff;
}
The problem: After click in some row, the background change to red
(this is OK) but after click on other row, the preview (red) row, lost thei background color.
Expected result:
All clicked rows need to save the red color, or EVEN BETTER - get some other color (to make the difference - row - selected row - visited row).
Ivan, you can not use an unique variable, you need use an array or a new property of your elements. Imagine you call this new variabe "selected"
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
[class.selected]="element.selected"
(click)="element.selected= !element.selected">
</tr>
See that your "elements" can has properties that not show in the table
Problem with Angular Material components that they are wrapped in many style classes and it's hard to overwrite it. Although there is some solutions which I discovered how to overwrite mat-* styles. I will give you an examples:
1. Define style class in global style.css file
First you need to discover which classes is used for your action. It could be done with development tools in Google Chrome or other tools.
Then in global styles file (style.css or style.scss...) define that class style.
i.e. (my case):
.mat-focused .mat-form-field-label, .mat-datepicker-toggle {
color: white !important;
}
2. Define style class using ::ng-deep or >>>
(deprecated)
In your component style class define same discovered mat-* style classes using ::ng-deep or >>> prefix.
i.e. (my case):
::ng-deep .mat-focused .mat-form-field-label, .mat-datepicker-toggle {
color: white !important;
}
Although this solution is deprecated and I didn't found replacement for that to overwrite styles in component styles file.
3. Use custom style class without view encapsulation
First you need to set encapsulation parameter/flag in your component. Example:
#Component({
selector: 'app-my-element',
templateUrl: './my-element.component.html',
styleUrls: ['./my-element.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class MyElementComponent implements OnInit {
...
}
Then you can write your own style classes for Angular Material components.
It might be that Material components will not look as before (real Material components)
It's not an exact solution for your problem, but direction for finding your own solution
I need to dynamically change the color in the react component for specific selector.
In scss (use sass) i have the following rule:
foo.bar.var * {
color: blue;
}
I want to change it in react code, to be yellow, red or something else.
I cant use style property for element, cause i need the selector to
apply for all subchilds !=)
Is there any native ways? Or should i use Radium? Or is there any similar libs for this? Maybe css-next some hove can help with this?
I have color picker, i cant write class styles for every color =(
For some answerers NOTE:
So i have selector in some scss file, that imported in some root js file with .class * {color: $somecolor} and i need change the $somecolor in that selector, during picking colors in color picker
Maybe i can somehow set selector for all nested inside style property? or there is the way how to recursively apply css style for every nested items from the style prop?
What about
class MyComponent extends React.Component {
render() {
const yellow = true // Your condition
return(
<div className={`foo bar var ${yellow && 'yellow'}`}
My item
</div>
)
}
}
.foo.bar.var {
& * {
color: blue;
}
&.yellow * {
color: yellow;
}
}
You could define a custom CSS property (CSS variables) using the style attribute of the element and assign the value to a prop, state etc.
<div className='foo bar var' style={{ "--my-color": props.color }}></div>
The custom property would work for any selector that apply to that component or children. So you could use it like that:
foo.bar.var * {
color: var(--my-color);
}
See a snippet with similar code here
this may sound stupid . but does this work ?
import myCss from './mydesign.css';
myCss.foo.bar.var = "your color"
I am trying to make a specific column to blue color.
For that I am using
clientsTable.addColumnStyleName(3,"nameColumn");
And the CSS is:
nameColumn {
color:blue;
}
but it's not doing anything whereas if I change my CSS to this
nameColumn {
background-color:blue;
}
it works, i.e make header color red , but why is not changing text color ?
thanks
addColumnStyleName adds the CSS class to a <col> element in the DOM, and only a handful CSS properties apply there (see also browser compatibility table)
You'd want to apply a CSS class to each cell in the column instead, using Column#setCellStyleNames()
Try
.nameColumn {
color: blue !important;
}