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.
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?
I'm using vaadin-combo-box and I have a problem. I have no clue how to customize look and feel of scrollbars for the dropdown. I read about styling parts and I know how to do it but this seems to be impossible. Cant figure out the way to select #scroller element because it has been design not to be a "part" to style. However that is the only way I can think of to apply custom style to dropdown scrollbars. How can that be accomplished?
Thanks in advance for help.
#Update
Turns out that as of today there is no way of having customized styling on scrollbars for vaadin-combo-box component. Element responsible for scrolling resides inside contents shadow DOM and is inaccessible from outside nor its going to inherit style implemented on the parent part [part="content"]
The dropdown part is called vaadin-combo-box-overlay, see: https://vaadin.com/components/vaadin-combo-box/html-api/elements/Vaadin.ComboBoxOverlayElement And it is available for styling.
This allows to style the dropdown to some extent, but there is additional shadow root, that prevents to apply e.g. ::-webkit-scrollbar styles on #scroller element.
So the last option would be to make a copy of the vaadin-combo-box html file in right place in frontend directory. It happens so that that file will be used instead of the one coming from webjar. Then you can edit that html file directly. Of course this means that if there are changes in future versions of vaadin-combo-box, you need to copy again, re-apply changes
Please bear with me, I'm having a little trouble wrapping my head around this one...
On face value I know this questions seems foolish. The answer us you DON'T modify your bower contents because anything you do is going to be overwritten each time the bower updates and you would have to reimplement the changes over and over.
But if the situation effectively requires that I modify the CSS stylesheet that styles one of my bower components how do I handle this?
The only solution that I can come up with would be to have my custom stylesheet style the same components, make sure it is called after the original bower stylesheet, and let my alterations cascade over the initial styling.
This will work fine for certain attributes (color, etc) but what about more "incremental" attributes? For example lets say the bower gives an item a left margin of 5px, but I set it to 2px.
Would my style cascading on top get negate the initial one or would they combine to give me a margin of 7px?
If they are added together does that mean I should reset these bower item attributes in the CSS reset at the top of my custom style sheet?
Sorry if this question is dumb or way off base, I just don't understand how I should handle this.
CSS properties are not cumulative. They don't add together. If a property is set in multiple places, the property with the most specific selector wins and the rest are ignored. You can override properties set before by re-specifying them with a higher or equal specificity.
The correct way in this case is probably to override the few styles you need in your own stylesheet that is included after the component's stylesheet, as you said.
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: