CODEWITHSUNDEEP
angularangular-material
user82395214
user82395214

Reputation: 929

Building a custom UI component library on top of material

I am looking to create an angular app. I want the final product to look a very specific way, far from what material looks like right now. However, I want to move fast to iterate on my product. I don't want to spend a ton of time reimplementing logic that is already available in angular/material.

I am thinking about wrapping every material component I want to use in a custom component. For example, I'd create a ui-tooltip component that wraps the material tooltip. Then, in ui-tooltip.style I'd force my own styles using the !important tag.

Is this how I should go about doing this? Is it possible to radically change the design of material while keeping the functionality? Are there projects you can point me to who've done this before?

Upvotes: 1

Views: 1300

Answers (1)

JeffryHouser
JeffryHouser

Reputation: 39408

If you think that Material, with just some tweaks will do what you want, that's great. If you want functionality changes, then extending components is a great way to do that. For example, I was on one team that created our own Toast-style component that could be positioned anywhere we wanted, not just at the edge of the screen. I was also on a team that combined the multi-select component with a chip list

However, if you want to use primarily the same functionality while only changing the look and feel I recommend creating a custom material theme. The docs focus mainly on colors, however using mixins will let you drill down into an Angular Material component to change things like sizing, padding, and margins.

Upvotes: 2

Related Questions