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
}
Related
I am relatively new to using angular material and it has taken a bit more work to use than I have faced using some other css frameworks like PrimeNG, Fomantic/Semantic UI. Most recently I have used PrimeNG which optionally comes with its own suite of utility classes in the form of the primeflex package. It does not appear that material has this (due to them leaving it up to you to decide i suppose) and I am therefore opting to use primeflex WITH angular material components. Is there an existing suite of material css classes that i can use instead, like simple classes that just give flex styles, height: 100%, etc.
My other problem is that I would like to tap into material in order to give my components background/font color styling relative to the current theme but I have not been able to find a 'helper class' that applies the current primary/accent/warn color to an element given the current theme. Any references to documentation are highly appreciated.
I assumed it would look something similar to:
// my-theme.css
#use '#angular/material' as mat;
.my-primary-text-class {
color: mat.$primary-text-color
}
or something similar?
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'm currently using bootstrap for my modal component but our current project has a css file that is using the same class with bootstrap (.Modal,.Modal-header).
The css styling of both files was messing the modal design.
Any solution for this?
Update
I use ::ng-deep to my css so I can specifically target without conflicting other css file.
I think you should not use Bootstrap components in your class. If this was not helpful, please check ask from https://stackoverflow.com/users/395910/terry or https://stackoverflow.com/users/8213994/aman-gojariya. They helped me too.
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.
What do you think are good ways to handle styling pseudo selectors with React inline styling? What are the gains and drawbacks?
Say you have a styles.js file for each React component. You style your component with that styles file. But then you want to do a hover effect on a button (or whatever).
One way is to have a global CSS file and handle styling pseudo selectors that way. Here, the class 'label-hover' comes from a global CSS file and styles.label comes from the components style file.
<ControlLabel style={styles.label} className='label-hover'>
Email
</ControlLabel>
Another way is to style the components based on certain conditions (that might be triggered by state or whatever). Here, if hovered state is true, use styles.button and styles.buttonHover otherwise just use styles.button.
<section
style={(hovered !== true) ?
{styles.button} :
{...styles.button, ...styles.buttonHover }>
</section>
Both approaches feels kind of hacky. If anyone has a better approach, I'd love to know. Thanks!
My advice to anyone wanting to do inline styling with React is to use Radium as well.
It supports :hover, :focus and :active pseudo-selectors with minimal effort on your part
import Radium from 'radium'
const style = {
color: '#000000',
':hover': {
color: '#ffffff'
}
};
const MyComponent = () => {
return (
<section style={style}>
</section>
);
};
const MyStyledComponent = Radium(MyComponent);
Update 04/03/2018
This has been getting a few upvotes lately so I feel like I should update it as I've stopped using Radium. I'm not saying Radium isn't still good and great for doing psuedo selectors, just that it's not the only option.
There has been a large number of css-in-js libraries since Radium came out which are worth considering. My current pick of the bunch is emotion, but I encourage you to try a few out and find the one that fits you best.
emotion - 👩🎤 The Next Generation of CSS-in-JS
fela - Universal, Dynamic & High-Performance Styling in JavaScript
styled-jss - Styled Components on top of JSS
react-jss - JSS integration for React
jss - JSS is a CSS authoring tool which uses JavaScript as a host language
rockey - Stressless CSS for components using JS. Write Component Based CSS with functional mixins.
styled-components - Universal, Dynamic & High-Performance Styling in JavaScript
aphrodite - It's inline styles, but they work! Also supports styling via CSS
csx - ϟ A CSS-in-JS solution for functional CSS in functional UI components
styled-jsx - Full CSS support for JSX without compromises
glam - crazy good css in your js
glamor - css in your javascript
glamorous - React component styling solved with an elegant API, small footprint, and great performance (via glamor)
styletron - ⚡️ Universal, high-performance JavaScript styles
radium - Set of tools to manage inline styles on React elements.
aesthetic - Aesthetic is a powerful React library for styling components, whether it be CSS-in-JS using objects, importing stylesheets, or simply referencing external class names.
j2c - CSS in JS library, tiny yet featureful
(Source)
Is there a reason you're not styling the pseudo selectors with your label-hover class like this? Or am I misunderstanding your question?
.label-hover {
color: orange;
opacity: 0.5;
}
.label-hover:hover {
opacity: 1;
}
You can't style pseudo selectors with inline styling (CSS Pseudo-classes with inline styles), and I think using javascript to see if the element is hovered is an unnecessarily complicated and hackish way of doing it.