I need to apply a custom style to the disabled the antd range picker.
I have added className to the component but the style isn't changing.
<RangePicker
className="my-range"
allowClear={false}
bordered={true}
format="HH:mm"
style={{ width: "100%" }}
/>
Styles Css: (need to change color of the text in the box)
.ant-picker-disabled.building-ophrs-range {
background-color: #ffffff;
.ant-picker-input.ant-picker-input-active {
color: #224cc0;
}
}
Codesandbox : https://codesandbox.io/s/basic-antd-4-20-7-forked-g5ee2t?file=/demo.js
try to write
.ant-picker-disabled.my-range {
background-color: #008000 !important;
}
Try this:
.ant-picker.my-range.ant-picker-disabled {
background-color: #008000;
}
Related
How can I change the background color, font color, and border color of this material-ui autocomplete textfield (combobox)? I would like to use css. this is what I have tried so far.
<Autocomplete
disablePortal
id="combo-box-demo"
options={clients}
className="test"
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
css class
.test {
.MuiAutocomplete-listbox {
color: red;
}
}
Since you would like to use css, you can change colors like this:
.test fieldset {
border-color: red;
}
.test .MuiInputBase-root:hover fieldset {
border-color: blue;
}
.test input {
color: red;
}
.test label {
color: red;
}
.test {
background-color: yellow;
}
You can take a look at this sandbox for a live working example.
Material-ui/ReactJS newbie question. I'm trying to show a pointer cursor when hovering over a Material-ui TextField but having a difficult time doing so. It makes use of 'cursor: text' by default. I've been able to successfully change the textfield background color on hover but adding "cursor: pointer !important" does no good. I've tried making use of className, class, style (inline), but I'm certain I'm not doing something correctly. Material-ui has a demo illustrating how to change textfield styling on hover and focused at [https://codesandbox.io/s/p7uwn?file=/demo.js][1] where I have also tried changing the cursor to a pointer on hover but still no luck. Any assistance would be greatly appreciated.
import React from 'react';
import styled from 'styled-components';
import { TextField, NoSsr } from '#material-ui/core';
const StyledTextField = styled(TextField)`
label.Mui-focused {
color: green;
}
.MuiOutlinedInput-root {
fieldset {
border-color: red;
}
&:hover fieldset {
border-color: yellow;
cursor: pointer !important;
}
&.Mui-focused fieldset {
border-color: green;
}
}
`;
export default function GlobalClassName() {
return (
<NoSsr>
<StyledTextField label="Deterministic" variant="outlined" id="deterministic-outlined-input" />
</NoSsr>
);
}
Just a quick browser inspection gave the CSS component we need to target. It's
.MuiOutlinedInput-input
Just giving it a
cursor: pointer;
property will solve your problem.
Here is the code:
import React from 'react';
import styled from 'styled-components';
import { TextField, NoSsr } from '#material-ui/core';
const StyledTextField = styled(TextField)`
label.Mui-focused {
color: green;
}
.MuiOutlinedInput-input {
cursor: pointer;
}
.MuiOutlinedInput-root {
fieldset {
border-color: red;
}
&:hover fieldset {
border-color: blue;
cursor: pointer;
}
&.Mui-focused fieldset {
border-color: green;
}
}
`;
export default function GlobalClassName() {
return (
<NoSsr>
<StyledTextField label="Deterministic" variant="outlined" id="deterministic-outlined-input" />
</NoSsr>
);
}
Or just literally put cursor:pointer into its css, either in-line as <Component style={{cursor: 'pointer'}}> or <Component sx={{cursor: 'pointer'}}> or in its styled component css. This will automatically change your mouse onHover, and the top answer here is way over the top. Just add cursor: 'pointer' to the component's css.
Using
<TextField sx={{ cursor: 'pointer' }} />
did not work for me, instead, I needed to specify it as
<TextField sx={{ input: { cursor: 'pointer' } }}
which did affect the desired change.
I'm using Angular 7 with Material Snackbar. I want to changes the color of Snackbar to green.
In app.component.ts, I have:
this.snackBarRef = this.snackBar.open(result.localized_message, 'X', {
duration: 4000,
verticalPosition: 'top',
panelClass: 'notif-success'
});
this.snackBarRef.onAction().subscribe(() => {
this.snackBarRef.dismiss();
});
In app.component.scss, I have:
.notif-success {
color: #155724 !important; // green
background-color: #d4edda !important;
border-color: #c3e6cb !important;
.mat-simple-snackbar-action {
color: #155724 !important;
}
}
But the Snackbar is still shown in its default colors.
I can see that the notif-success class has been applied to the snackbar
<snack-bar-container class="mat-snack-bar-container ng-tns-c18-84 ng-trigger ng-trigger-state notif-success mat-snack-bar-center mat-snack-bar-top ng-star-inserted" role="status" style="transform: scale(1); opacity: 1;">
Why is the custom css not working?
You should write that .notif-success CSS class on your main styles.scss, instead of the app.component.scss.
If you are wondering, it is the one which is on the same directory level as your index.html, package.json, etc.
MatSnackBar colors can be customized by adding this CSS rule to the styles.css file. Tested for Angular Material 15.
.mat-mdc-snack-bar-container {
--mat-mdc-snack-bar-button-color: red;
--mdc-snackbar-container-color: black;
--mdc-snackbar-supporting-text-color: yellow;
}
In Angular 15, the answer by Egemen Çiftci is the only one that works for me. I extended it to support different background colors for success and error notifications:
this.snackBar.open('Success', 'Close', {
panelClass: 'app-notification-success',
};
this.snackBar.open('Error', 'Close', {
panelClass: 'app-notification-error',
};
In the global styles.scss:
.mat-mdc-snack-bar-container {
--mat-mdc-snack-bar-button-color: #ffffff;
--mdc-snackbar-supporting-text-color: #ffffff;
&.app-notification-error {
--mdc-snackbar-container-color: #f23a2f;
}
&.app-notification-success {
--mdc-snackbar-container-color: #43a446;
}
}
"panelClass" styles is not being applied to Snack Bar in v15, It's because in v15 the background color is on a different element.
In .css file
.style-error {
color: white;
--mdc-snackbar-container-color: #FF005D !important;
}
In .ts file
openSnackBar(message: string, type:string) {
this._snackBar.open(message,'Ok', {
duration: 2000,
panelClass: ["style-error"]
});
}
Above code will work for Angular v15.
::ng-deep is deprecated as stated by #Akber Iqbal. Put the following code in the global css or scss
snack-bar-container.mat-snack-bar-container {
color: #155724 !important;
background-color: #d4edda !important;
border-color: #c3e6cb !important;
}
div.mat-simple-snackbar-action {
color: red !important;
}
This styling code worked on #angular/material#11.2.2 with #angular/core#11.2.3
Note: It doesn't work in the component css or scss
This is what you're looking for:
::ng-deep .mat-snack-bar-container{
color: #155724 !important;
background-color: #d4edda !important;
border-color: #c3e6cb !important;
}
::ng-deep .mat-simple-snackbar-action {
color: red;
}
complete working demo here
Instead of:
panelClass: 'notif-success'
Try:
extraClasses: ['notif-success']
I had the same issue and stumbled across this Stackblitz that had a working example.
Just realized extraClasses is deprecated, the accepted answer is probably better here.
Consider this switch:
<Switch class="switch" formControlName="answer"></Switch>
If I do this it only works when you haven't activated the switch yet, after that the background-color will always be the same even when the switch is not active:
.switch[checked=true] {
background-color: #FE4A49;
color: #FE4A49;
}
And if I do this:
.switch {
background-color: #FE4A49;
color: #FE4A49;
}
Then the background will always be the same regardless of the state.
What's the correct way of styling a switch when using it with angular's model bindings?
i'm styling an App and this is i'd do.
CSS:
Switch#userStatus[checked=true]{
color:#ff0048 ;
background-color: white;
transform: scale(1.25, 1.25); // This is for change the size when checked
transform: translate(-5,0); // This is for stay the position after scale it
}
Switch#userStatus[checked=false]{
color: gray;
background-color: gray;
}
And this is my XML:
`<Switch id="userStatus" checked="false" />`
I hope this helps!
I had an issue with switch
background-color
and it was not working as expected. Changing the background-color was changing the whole switch (the gray part). So I had to change only the color property:
Switch[checked=true] {
color: #f68533;
}
.switch-notchecked {
background-color: #FE4A49;
color: yellow;
}
.switch-checked {
background-color: blue;
color: green;
}
In your template
<Switch #sw checked="false" (checkedChange)="switchChanged(sw.checked)" [class]="isChecked?'switch-checked':'switch-notchecked'"></Switch>
In your component
isChecked:boolean;
switchChanged(checked) {
this.isChecked = checked;
}
How do I change md-input-container placeholder color using css in Angular Material? As screenshot below I have phone no. and password textfield. Phone no. textfield has Phone No. and password has Password placeholder name.
in the last version of angular you can remove the placeholder in the input and add a mat-placeholder in the mat-form-field and custom the css with a class
html :
<mat-form-field>
<input matInput type="text">
<mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>
css:
.mat-focused .placeholder {
color: #00D318;
}
Placeholder is depicted as a <label> in Angular Material. So you actually need to style the label not the placeholder.
As soon as you click (focus) on the input this <label> which is looking as a placeholder slides up and converted into a form <label>.
So you just need to apply this CSS:
/* When the input is not focused */
md-input-container label {
color: red;
}
/* When the input is focused */
md-input-container.md-input-focused label {
color: blue;
}
Have a look at this Plunkr Demo.
In Angular 4+
First you will need to turn ViewEncapsulation off to style Material Elements. Be warned this is subverting the Angular emulated-shadow DOM default and you should proceed with caution (https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html).
In dummy.component.ts:
#Component({
...,
encapsulation: ViewEncapsulation.None,
})
Then give your < mat-form-field > element a unique class in dummy.component.html:
<mat-form-field class="dummy-input-field" floatPlaceholder="always">
<input placeholder="Dummy"/>
</mat-form-field>
Finally in dummy.component.css apply the styling:
.dummy-input-field .mat-input-placeholder {
color: red;
}
Similarly, if you'd like to dynamically change color if the field is focused:
.dummy-input-field.mat-focused .mat-input-placeholder {
color: red;
}
.container {
.mat-form-field-outline,
.mat-form-field-empty.mat-form-field-label,
.mat-form-field-label,
.mat-form-field-underline,
.mat-input-element,
::placeholder {
color: $white !important;
}
}
The code above gives me the results below. I am overriding the form-field outline, label-empty, label, underline, input element, placeholder text.
I'm using Angular 8.2.2 and Angular Material 8.2.2
For the newer versions of material which have a mat prefix instead of md prefix, you can do this in 2 ways:
way 1: using view encapsulation set to none and then writing the styles in the components css file, like #user2245995 pointed out in the answer above.
Although this is the way angular suggests, please be advised that the styles you write here will propagate to all the child/parent components and effect other elements there.
way 2: We can use the shadow piercing descendant combinators i.e. /deep/ or ::ng-deep or >>> Below is an example
/deep/ label.mat-input-placeholder {
color: #fff; // choose the color you want
}
Although this method is specified in the angular docs as of now, they have mentioned that this method will soon be deprecated.
read more: https://angular.io/guide/component-styles#!#-deep-
I tried to be as deterministic as possible for the color of a mat input and I dare to share the result here, hoping it will help some others (the placeholder color customization need is handled, as asked in the question):
CSS custom properties used
Note: The colors are considered different when the focus is here or not, that is why we have 2 blocs in the following:
--clear-button-color: lightblue;
--asterisk-color: lightgreen;
--label-color: springgreen;
--underline-color: blue;
--input-color: lightgray;
--clear-button-focused-color: blue;
--asterisk-focused-color: green;
--label-focused-color: pink;
--underline-focused-color: yellow;
--input-focused-color: gray;
--placeholder-focused-color: magenta;
--caret-focused-color: blue;
SCSS styling
.mat-form-field {
&.mat-focused {
> .mat-form-field-wrapper {
> .mat-form-field-flex {
> .mat-form-field-infix {
> .mat-input-element {
color: var(--input-focused-color);
caret-color: var(--caret-focused-color);
&::placeholder {
color: var(--placeholder-focused-color);
}
}
> .mat-form-field-label-wrapper {
> .mat-form-field-label {
> mat-label {
color: var(--label-focused-color);
}
> .mat-placeholder-required {
color: var(--asterisk-focused-color);
}
}
}
}
> .mat-form-field-suffix {
> .mat-focus-indicator {
> .mat-button-wrapper {
> .mat-icon {
color: var(--clear-button-focused-color);
}
}
}
}
}
> .mat-form-field-underline {
> .mat-form-field-ripple {
background-color: var(--underline-focused-color);
}
background-color: var(--underline-focused-color);
}
}
}
> .mat-form-field-wrapper {
> .mat-form-field-flex {
> .mat-form-field-infix {
> .mat-input-element {
color: var(--input-color);
&::placeholder {
color: var(--placeholder-color);
}
}
> .mat-form-field-label-wrapper {
> .mat-form-field-label {
> mat-label {
color: var(--label-color);
}
> .mat-placeholder-required {
color: var(--asterisk-color);
}
}
}
}
> .mat-form-field-suffix {
> .mat-focus-indicator {
> .mat-button-wrapper {
> .mat-icon {
color: var(--clear-button-color);
}
}
}
}
}
> .mat-form-field-underline {
> .mat-form-field-ripple {
background-color: var(--underline-color);
}
background-color: var(--underline-color);
}
}
}
.mat-input-element::-webkit-input-placeholder {
color: red;
}
this is if you use a structure similar with this one:
<input
matInput
[placeholder]="placeholder"
/>