Angular Material UI

[reboottime]

Overview

Introduction

This article intends to guide a newbie to be familiar with angular material ui. content covered are highly similar what angular material ui official doc.

Quick References

• Customize Styling for Angular Material UI apps
  • Angular Material Custom Theme Video Tutorial, by Academind
  • customize multiple themes for angular material ui app
  • Angular custom theme official doc
  • Material UI guideline, including css class names
• Angular CDK doc

[reboottime]

Angular Material UI CDK

• What is it: Angular Material UI CDK is a set of prebuilt toolkits that facilitates building your own components/functions on top of it.
• When and how to use CDK: Identify the components or behaviors in your application that could benefit from the CDK. For example, if you need a custom drag-and-drop list, the CDK’s drag-and-drop utilities would be perfect for that.

[reboottime]

Customize Material UI based Angular SPA

Guideline: https://material.angular.io/guides

• Angular Material UI uses SASS as its theming styling language.
• If you installed Angular Material UI, by default, the styles property in angular.json points to something like below

Now the next task is how to know what colors a component uses to style itself at a glimpse.

Common Problems

• Style doesn't work as Material UI shows: For example, button component-related directives may function without Angular CLI errors but lose styling. Ensure that the corresponding module for the component or directive is correctly imported to resolve this.

My Tricks

• How to force styling using sass: When styling Angular components, it can be challenging, especially for extensive customization, and identifying relevant class names within the Angular code isn't always clear. Here's my approach:

  • Inspect in the Browser: Select the CSS class names from the browser for the component to be customized.
  • ChatGPT for SCSS: Ask ChatGPT to generate condensed SCSS for the component you want to customize
  • Apply Styling: Copy styling from Figma and apply it to the specified SCSS class names.

• How to update deeply nested styling on material ui components: Manipulate on scss variables

• Another trick is to read material ui guideline and source code,

  • to figure out how the angular component class names are generated on html, for example, take form field as an example
  • view how class names are added to which DOM element