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.
Related
I'm new in React and a new dev in general;
I know that there are many ways to style elements in React itself:
importing CSS,
locally scoped CSS modules,
CSS-in-JS via Styled
Components or Emotion,
utility-first CSS like Tailwind statically
extracted CSS with libraries like "Compiled" and "Linaria",
inline styling
style object variable
and two current APIs to style MUI elements:
Styled and
SX
When it comes to customizing MUI components, it's obvious that it's best to use one of these two; it also seems that using MUI doesn't restrict the use of all non-MUI ways to style things.
So I guess I'm asking about the "best practice", or at least "an ok practice" of minimizing the amount of styling techniques used (so that the code doesn't become bloated).
This, in turn, raises questions that are not answered obviously in the docs:
what's the difference between MUI's styled API and the "styled components" (CSS in JS via emotion that we're talking about) ?
Are there absolutely no conflicts between any of React's styling techniques and MUI APIs ?
are there styling techniques that are conflicting with MUI styling APIs ?
if non-MUI elements shouldn't be styled with MUI APIs, is it then considered a best practice to just style with your one favorite way but stick to this minimum ?
whatever way is best, are there cases when it can't be used solely ?
Example: I need to deal with a non-MUI component: to put it simply, I'm trying to center an SVG which may be either too wide or too thin for the screen and this will change dynamically. All I need is for it to be either 100% height if it's tall or 100% width if it's wide; in such way so that scroll-bars never appear.
As reddit answer says: there turns out to be no conflicts between React's and MUI's ways of styling. You just have to ensure your style’s specificity order is how you want it to be. In large codebases it’s always good to stick to one type of styling, even with MUI. It’s very likely you will need to have some styling for non-MUI components. You could use MUI’s styled(), or css in js or SASS or LESS. There is no one perfect answer - readability, maintainability and performance are your main considerations.
So since MUI's styled() should work for all non-MUI components/elements, I would go with that.
I am learning React and realized that you can use either real CSS by importing a CSS file, or you can use JS which has CSS-like code using camel cases.
Example for pure CSS: import './AppStyle.css' which contains background-color: black;
Example for JS version: const AppStyle = { backgroundColor: "black" }
Which one is better to use and why? Or maybe they’re both fine?
Writing CSS allows all the benefits of CSS (like selectors, media query).
In inline styles, you write Object-like styles vs. actual CSS.
Code readability is worst in inline style implementation, while managing styles using the CSS is easy to maintain.
The inline styles take more space in DOM because all the styles are defined internally along with the DOM element, while CSS is described separately, creating no issues for the compiler while compiling the file.
There is ups and down with both solutions, you can achieve the same result with both, so it comes down to you want styling solution you prefer
Based on my experience,JSX and CSS are different technologies to solve the styling problem.
Good points of css:
css selectors
styling into css files
Good points of js:
js into styling -> sometimes you want to calculate styles over js https://cssinjs.org/jss-plugin-rule-value-function/?v=v10.0.0-alpha.3#enables-functions-for-dynamic-styles
more approaches to solve one problem -> it has js
Recommendation: Try to use one, it reduce the complexity and documentation to read.
I have a simple react component it has in the JSX the property css, I understand this prop it is for styling, but it is not clear if it is a "native" css react property, or if it comes from styled-components or some other library.
Do you have an idea from which library it is if not a react one?
<div css={{color: 'red', backgroundColor:'blue'}}>Hello world!</div>;
css prop comes from styled-components library itself. It is to be used when a small bit of styling does not warrant making a component for it.
However, it is not implemented centrally in the library and functions with the help of the Babel plugin. This is why you don't need to import the function to use it.
Docs
It comes from Glamor which provides many convenient ways to style your components. One way is to use its css prop as in your example. It works exactly the same as the default style prop except it supports the entire CSS language.
Here an example:
https://github.com/threepointone/glamor/blob/master/docs/howto.md
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.
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.