You can use several approaches to solve responsive design for a web application. In my case, I used the Material UI components library, but some custom solutions needed proper styling. I like the final look of the mobile version for my session board, but I am not proud of the code I wrote to achieve it. It’s a mix of SCSS, the use of “sx” to style MUI components, and there might be some inline styling as well. Currently, it seems there will be things to refactor regarding this 🥸 But oh well…
✅ Here are 3 approaches to implement styles more effectively from the beginning when using React js and MUI:
1. CSS-in-JS with Material UI: Utilize Material UI’s sx prop or the styled function from mui/system to handle styling directly within your JavaScript or TypeScript code. This method leverages the full power of JavaScript to manage styles and makes it easier to apply dynamic styling based on props or themes.
2. CSS Modules or SCSS: Use CSS Modules or SCSS for managing your stylesheets s...
Suggested Credits
Tags, Events, and Projects