As someone new to React and development in general, I understand that there are various ways to style elements within React itself:
- importing CSS,
- using locally scoped CSS modules,
- implementing CSS-in-JS via libraries like Styled Components or Emotion,
- utilizing utility-first CSS frameworks such as Tailwind,
- employing extracted CSS with tools like "Compiled" and "Linaria",
- applying inline styling,
- or using style object variables.
In addition, there are currently two APIs available for styling MUI (Material-UI) elements:
- Styled API
- SX API
When it comes to customizing MUI components, it is recommended to choose one of these options; however, it does not necessarily mean excluding other non-MUI styling techniques.
Therefore, the question arises: what is the best practice, or at least a suitable practice, for minimizing the number of styling methods used to avoid bloated code?
This leads to further inquiries that are not explicitly addressed in the documentation:
- What sets apart MUI's styled API from standard "styled components" (CSS-in-JS via emotion)?
- Are there any conflicts between React's styling approaches and MUI APIs?
- Are there any styling techniques that clash with MUI styling APIs?
- If non-MUI elements should not be styled with MUI APIs, is it advisable to stick to a single preferred method while keeping it minimal?
- Regardless of the chosen approach, are there scenarios where it cannot be solely relied upon?
For instance, consider a scenario where I need to work with a non-MUI component: specifically, attempting to center an SVG that may vary in width and height dynamically. The goal is to ensure that it always fits the screen without triggering scroll bars by adjusting its dimensions accordingly.