Comments (2)
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.
from angular-playbook.
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
from angular-playbook.
Related Issues (20)
- Essentials Of Creating Angular SPA Application HOT 1
- Ngrx practice on Angular Project HOT 3
- RxJs and Reactive Programming HOT 5
- A guess on Angular Material UI
- Ecosystem UI libraries
- Angular Nuance
- [Angular Material UI] Table and its mechanism
- HTTP request and Http Client HOT 1
- CI/CD configuration for Angular SPA Applications
- [Angular Material UI] Build your toast service HOT 2
- [Angular Fundamental] Build Angular Directives HOT 4
- [Angular Fundamental] Reactive Form HOT 7
- Testing Angular Applications HOT 3
- Routing in Angular Applications HOT 4
- State Management In Angular Applications HOT 1
- Rxjs common usage scenarios HOT 1
- UI Effect libraries HOT 2
- Code Style Guide In Angular Application HOT 3
- [Test Angular Application] Unit Testing HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-playbook.