Is there any way to completely override all material-ui styles and have components adhere to your own completely custom style guide? In essence, wiping all material-ui styles and starting from their html skeletons? Creating a new theme with mui or themeProvider for material-ui components isn't robust enough.
I've looked # material-ui source code and they have a styles.root variable. Is there was a way to access that object and make it more robust? I'm open to any ideas and recommendations.
So far what hasn't worked is:
themeManager
muiTheme
inline styles ( you can't access the child elements of the components )
class styles ( you have to use !important with a lot of the css attributes and we're trying to avoid that )
In essence, wiping all material-ui styles and starting from their html skeletons
Material UI doesn't use seperate CSS. All CSS is driven by JS so your only option is what is offered by ThemeManager.
Related
I'm new to Material UI. When should I use props (in the .jsx script itself) and CSS (separate CSS stylesheet) to style MUI elements? Do I still need to use the CSS stylesheets for MUI elements at all, e.g. use CSS or sx={{}} prop? Or should it be left for non-MUI elements only?
While I understand MUI provides us with the template to make style changes using props, I also understand that we should typically follow a separation of concerns, hence the question.
Thanks a lot!
So you can check this out in their docs below.
https://mui.com/material-ui/customization/how-to-customize/#2-reusable-component
I personally wouldn't use CSS with MUI. You can use either CSS or the sx prop to override styles, however it feels like sx is the preferred method. Using CSS requires targeting the specific classname and nesting your classes which I find is quite a lot of work for what is meant to be one-off customizations.
If you wanted to change specific MUI components, I still wouldn't use CSS as you can just create your own themes with the ThemeProvider.
The idea behind MUI is a CSS-in-JS solution so you're sort of doing away with the concept of the traditional "separation of concerns". If you prefer to set up your projects that way, things like Tailwind or SASS/SCSS are more suited to that.
So in summary, yeah I'd only use CSS with the non-MUI components, sx prop for quick style overrides, and the ThemeProvider for global style changes.
I am currently developing a web-application with Vaadin. Vaadin components are using the web-components standard, so the components DOM is capsuled in a shadow dom.
Now I would like to apply a custom style for all the scrollbars in the application.
This is possible using the CSS ::-webkit-scrollbar selectors (if the browser supports it).
However, this styles don't apply to the shadowDOM, so if one of the web-components shows a scrollbar (for example the vaadin-grid), that scrollbar does not use my custom style.
Is there a way to apply this style to all scrollbars on the page without adding the custom style to the shadow dom of every web-component?
Is there a way to apply this style to all scrollbars on the page without adding the custom style to the shadow dom of every web-component?
No, there is no way do that. That is specifically what web components are purposed to do. I.e. to protect internals from the direct access. So customization of protected elements is possible only when the web component offers some sort of API for that.
In Vaadin the typical approach is themable mixins / style modules which you can import for components in format like below
#CssImport(value = "./styles/my-styles.css", themeFor = "vaadin-grid")
As pointed out by Jouni, you can register a style sheet that applies to all Vaadin components, with themeFor="vaadin-*"
#CssImport(value = "./styles/my-styles.css", themeFor = "vaadin-*")
Which helps the burden.
We've two options to keep styles in an Angular 9 app; global styles in styles.css or individual component level styles in the component css file.
If looked at the project from performance perspective;
what should be the preferred way?
Should we keep all styles in a single global style.css file or keep each component related styles in their component.css file?
To answer this question we have to refer to the Angular official doc.
By using Using component styles you will have a better modular design.
Angular can bundle component styles with components, enabling a more
modular design than regular stylesheets.
But, if there are some styles that are common between more than one component it's better to have a shared css and e.g. if you use pre-processor such as .SCSS, LESS, SASS, ..., you can have some _var.scss to define general styles such as base color, fonts, ... and then #import in other component styles or just register global style files in the styles section which, by default, is pre-configured with the global styles.css file.
So, using component styles provide scoping restriction and View encapsulation for your app. This scoping restriction is a styling modularity feature:
You can use the CSS class names and selectors that make the most sense
in the context of each component.
Class names and selectors are local to the component and don't collide with classes and selectors used elsewhere in the application.
Changes to styles elsewhere in the
application don't affect the component's styles.
You can co-locate the
CSS code of each component with the Typescript and HTML code of the
component, which leads to a neat and tidy project structure.
You can
change or remove component CSS code without searching through the
whole application to find where else the code is used.
There are several ways to add Global (Application wide styles) styles to the Angular application. The styles can be added inline, imported in index.html or added via angular-cli.json. The angular allow us to add the component specific styles in individual components, which will override the global styles.
I don't think there is much (if any at all) significant difference in performance. The global or component style distinction is all about the scope of those styles and maintainability of your codebase. Generally its good idea to keep everything in components as they are scoped to themselves and will not accidentally override other same styles from anywhere else. And global styles should stay mostly to theming, utility, helpers etc.
Besides you have an option to make component style global as well, if for some reason you need to do that.
step to define/preferable way for global style
Create _base.scss file in the css folder (first create css folder).
import other helping scss file in _base.scss file
add the entry of _base scss file in style.scss file (style.scss available when we create the folder).
I was playing a little bit with angular materials components. I wanted to know how to overwrite style of angular materials components in scss of component, not in global.scss. And I am wondering why I can overwrite main class of example mat-btn ".mat-raised-button" with different css styles, but for example i can't overwrite main class on mat-tabs ".mat-tab , .mat-tab-header , .mat-ink-bar". I think this is simple question maybe it's about creating content in shadow dom or something but I want some PRO to answer that question :).
For material components like mat-tab, you can use ng-deep in css for styling
For eg:
mat-tab::ng-deep {
// your styles
}
I have an issue with styling React Components with semantic Ui for React (http://react.semantic-ui.com/). I know I can modify the Semantic UI's styles Core and I did that however sometime I want to put my own styles into their components.
And I really want to use BEM methodology CSS naming convention while defining class names.
Short example, I have <Menu /> Component and I want to change a background of it, so I will add a class <Menu className="menu-header">, .menu-header class has different background-color property.
And the point is, that I cannot modify it without !important, because semantic UI has higher priority (they are grabbing elements more specific, with few classes not just by one like I want to). All styles are being caught by webpack, and my .menu-header styles are at the bottom of bundle.js - webpack output, lower than semantic UI's. The .menu-header class is being imported directly to my new component which uses <Menu className="menu-header"> example by CSS loader in webpack.
What I can do in this case?
My ideas are that I can modify core of semantic ui, change everything out there, but it doesnt solve my problem. Whenever I will want to modify something again, I would have to use !important - I don't like it.
I realized that react inline js styling has the highest priority and it overrides semantic ui styles, but it is a little more complicated than less which I am using an I am not sure whether it would be a good approach in such a big app as the one I want to develop.
I think the use of !important within semantic-ui should be labeled as a bug. I have ran into similar problems and the easiest way to solve it is using inline styles.
You can probably use something like react css modules to help you with that task.
I don't think this is possible. Someone would need to rewrite semantic ui in BEM.
I personally wouldn't use it unless it was in BEM/SASS, I'd assume there are quite a few others as well.