How To Remove Underline of Angular Material Date Picker - css

I want to remove underline of Date Picker.
By using inspect I did it but its not working by css. How can I do it by css
::ng-deep{
&.mdc-line-ripple::after{
border-bottom-style:none !important ;
}
}


You are using regular CSS. Try to use:
::ng-deep .mdc-line-ripple::after {
border-bottom-width: 0 !important;
}
See more:
Nesting CSS classes

Related

Conditional css on hover based on class of row of Vuetify simple table

I have a Vuetify v-simple-table where I need to render row css differently depending on whether a task is complete or not.
I can conditionally render the background color with the following code.
<tr :class="[done? 'greenBG' : 'whiteBG']">
The css is straight forward.
.greenBG {
background-color: #79ecc5;
}
.whiteBG {
background-color: white;
}
However, I cannot seem to disable the defualt :hover css. I tried connecting it to the class with this css.
tr.greenBG:hover { background-color: green }
If anyone can help me achieve this I'd be grateful.

Try with the !important property to ensure you override any conflicting vuetify CSS
tr.greenBG:hover {
background-color: green !important
}
if you really want to avoid using !important you need to be as specific as vuetify's CSS selector:
.v-data-table__wrapper
table
tbody
tr.greenBG:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
background: green;
}

How to apply styles using styled components

I try to style my component using:
export const StyleCascader = styled(Cascader)`
background-color: gray;
ul.ant-cascader-menu {
background: red !important;
}
`;
Here i am using styled components, but even i added !important, the styles don't appear. What could be the issue?
Demo: https://codesandbox.io/s/custom-trigger-ant-design-demo-gw0kb?file=/StyleCascader.js:74-210

You mentioned ul.ant-cascader-menu selector, but there is no such element in DOM.
https://codesandbox.io/s/custom-trigger-ant-design-demo-f9gb5

ngx-charts-gauge title color is unable to modify

I'm trying to add ngx-charts-gauge on angular5 app page.
Following these : https://swimlane.gitbooks.io/ngx-charts/content/charts/gauge.html
Everything works fine except I don't find any way or attribute or info to change Big center title color...It stills black !
I tried to override css class...with no chance.
.chart-container {
color: white;
}
Any help would be appreciated.
Thanks.

Change your css as below it will work
:host /deep/ .chart-container {
color: white;
}
OR
:host ::ng-deep .chart-container {
color: white;
}
Reason: Component style only applies to the html in component.
To force a style down to the child component use /deep/
documentation, another reference

Use css to apply global style to material.angular mat-card to set background color

Trying to change the background of material.angular.io mat-card globally.
I added the below to styles.css and it does not work.
mat-card {
background:pink
}

You just need to add a period in front of your css rule:
.mat-card {
background: pink;
}
Here is a StackBlitz to play with it using a forked example from the Angular Material site.

Change progress bar color in Primeng

How could we change the progress bar colour in Primeng. In the progress bar documentation it lists down
ui-progressbar-value
as the Element whose width changes according to value.
But when in the CSS when I set
.ui-progressbar-value {
background-color: #ef5439;
}
It does not change anything. Infact I don't see any color.
Any help would be appreciated.

First add your own unique class in your progress bar like below
class="customProgress" and then try to override it in your scss or css file.
Hope it will work
<p-progressBar class="customProgress" [value]="value"></p-progressBar>
.customProgress .ui-progressbar .ui-progressbar-label {
color: yellow;
}
.customProgress .ui-progressbar .ui-progressbar-value {
background: red;
}

I achieved the result with the following configuration:
HTML
<p-progressBar [value]="progressValue"
[ngClass]="'customProgress'">
</p-progressBar>
In the CSS file, this is what you have to add:
::ng-deep .customProgress .ui-progressbar .ui-progressbar-value {
background: #ef5439;
}

The above solutions did not work for with primeng 11. I achieved the result in this way
`<p-progressBar [value]="progressValue" class="customProgress"></p-progressBar> `
and with theming property CSS
::ng-deep .customProgress .p-progressbar-label {
background: #ef5439;
color: #fff;
}

In angular prime ng components use below method of style to change progress bar color
<p-progressBar [style]="{'background':'red'}"></p-progressBar>

Resources