# @berta.codes on Instagram

- **Type:** Image
- **Original URL:** https://www.instagram.com/p/C--wyNSAGUm
- **Gondola URL:** https://gondola.cc/posts/62188778-bertacodes-instagram
- **Thumbnail:** https://img.gondola.cc/tr:w-,h-,fo-auto/postThumbnails/2f14beeb89.jpg
- **Posted:** 2024-08-22T17:31:06.000+00:00
- **Account Owner:** BERTA MATULIAUSKIENE (@berta.codes) — https://gondola.cc/berta.codes

## Caption

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 separately from your JavaScript code. CSS Modules offer a way to scope CSS to individual components, avoiding global conflicts. SCSS provides powerful features like nesting and variables, which can be useful for creating consistent and maintainable styles.
	3.	Design System or Theming: Implement a design system or theme that aligns with Material UI’s built-in theming capabilities. Define a set of consistent styles, colors, and typography in a central theme configuration and apply it throughout your application. This ensures uniformity and makes it easier to manage and update styles in one place.

Using these approaches, you can create a more organized and maintainable styling strategy for your web application.

I personally wanted to go with the 3d one, but yeah… it was a bit time consuming for me, coz I have not properly used it yet. Maybe I will refactor my styles to this later… we will see:)

#frontenddeveloper #jsdeveloper #typescriptdeveloper #myvmp #webapps #codenewbie #learncodinganywhere #mycodingjourney

## Stats

- **Views:** 0
- **Likes:** 1,450
- **Shares:** 0
- **Comments:** 10

## Tags

webapps, typescriptdeveloper, jsdeveloper, mycodingjourney, codenewbie, myvmp, frontenddeveloper, learncodinganywhere

---
Copyright (c) Gondola