What is the best way to override the angular-material theme...?
Is it a good practice to override the angular-material classes, for example:
.mat-form-field-infix {
background-color : #000fff;
}
or By creating own css classes for the Angular-material elements..?
By creating the own css classes, I'm facing the problem while selecting the inner child elements in the angular-material element.
Here I have created a custom class called "form-filter-select-wrapper",
but I want to change the styling for the element with the class "mat-form-field-infix", which is parent element to the "form-filter-select-wrapper" class.
How can I customize the properties for this class "mat-form-field-infix". Which I can not handle from the component level.
Please advice me the best way to override the Angular-material elements.
In my view, the best way to override a material theme is by creating a custom theme, as explained on the official documentation:
Theming your Angular Material app
Theming your custom component with Angular Material's theming system
The basics is to create a custom theme for the entire app, using default angular palettes/colors (available here), deciding between light or dark theme and letting it apply to the entire app.
Still, you may go much further, for example:
Creating custom color palettes based on hex color codes
Creating multiple themes and apply them to different components
Theming components based on parent class
Related
I have been applying a custom theme to several antd components and they have gone and worked fine. When working on the several past few components (datepicker and modal) the overridden styles are not applying.
When inspecting I am seeing this class style that is being applied and my custom style refuses to override it. Any suggestions or tips to bypass this issue?
The picture above shoes the issue. The style applied in .ant-modal-title is being overwritten. I am unsure what it means by ".css-dev-only-do-not-override-sk7ap8"? Does this indicate this class can NOT be overridden?
We have an Angular project, with Material and we're having some issues with overriding styles.
For example, if we want to change the border-radius globally on <mat-card>, we currently need to add important to the styles:
.mat-card { border-radius: $some-var !important; }
This seems to me to be caused by the material styles loading after our own custom styles. At least according to "traditional" CSS standards. So usually you could just change the load order around, and the last loaded styles would overwrite the previous.
Is there a way to achieve this? Or how are we supposed to style these kinds of elements, without adding !important all over?
You are not really supposed to "style these kinds of elements" - that's not what Angular Material is about. But some customization can be done - and a guide is available: https://v6.material.angular.io/guide/customizing-component-styles.
You especially need to understand how style is encapsulated and dynamically applied. You can control when the global Angular Material style sheet is loaded in the "traditional" way, but you cannot control when all component style is applied because some of it is dynamic. If you hope to completely restyle everything - you should probably consider a different library as it is not always merely a matter of redefining class properties.
I'd like to use several buttons on single page, but I want to have one group which has one style (e.g. red color) and other one with different style (e.g. gray background and red forecolor).
Is it somehow possible?
Yes you can. The way to do this would be to use the css scope option when downloading the ui - http://jqueryui.com/download/
Simply include the framework, and the include both stylesheets with the different styles. Make sure to apply different css scopes (e.g. .light-style and .dark-style).
Next, in your html, whenever you show the buttons, add the appropriate CSS scope to the parent element so that the correct style is picked up.
You can also manually combine the two stylesheets so that you save space. This is assuming you only want the two differing button styles only.
Read the theming section here: http://api.jqueryui.com/button/
You can always add extra class to change the style. So after calling button() on an element, you can:
$(element).removeClass("ui-button-text");
$(element).addClass("ui-button-text-2");
and of course you need to define your own CSS class for this:
.ui-button-text-2 { color: red; }
This is of course clumsy, because you need to use two calls instead of a single button() call. But jQuery can be extended - you can simply create a $.themedbutton() method that accepts extra parameters...
Can any1 tell me how to change the css style properties internally without changing custom.css file in jquery..so that the internal properties can effect the webpage..like changing properties of widgets and jquery-ui(ex:buttons,datepickers etc)...
You can just override the styles defined in the jquery style sheets in your own stylesheets. CSS stands for Cascading Style Sheets. The Cascading part means that one style can override another. You just have to place it further down the evaluation chain (or make it more specific, or any number of other ways).
You just create your own style sheet. Make sure it comes after the jquery-ui stylesheet in your page, and redefine the styles.
I would like to programmatically set a border around a Form component in Java. How can I do this without having to edit the css style sheet?
You could wrap the form with a Panel component, which has a border defined already. Otherwise, not much alternatives than just using CSS.
One option, if you wish to stay inside the server environment, is to use the CSSInject add-on and add the border using that (you still need to write CSS, but you can do it on the server in a Java file and not inside a regular CSS file).
Vaadin Flow — Style::set to specify CSS
In Vaadin Flow (Vaadin versions 10 and later), you can conveniently set CSS for a widget or layout programmatically. No need to edit separate CSS files, even though styling with CSS files is the recommended way.
On your widget/layout, call getStyle to retrieve the Style object.
On that Style object, call set to pass the name and value of your CSS property.
For example, I find setting a bright colored border on my nested layouts quite helpful for debugging.
myVerticalLayout.getStyle().set( "border" , "6px dotted DarkOrange" ) ;
You can see this in action with this screenshot on my Answer to another Vaadin question here: