Best way to style non-MUI elements in MUI?

Question

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.

Answer 1

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.