Angular Material 15: How to customize the styling of buttons and input fields?

ONLINECAST

2 min read

·

05-10-2024

6

0

Share

Angular Material 15: Styling Buttons and Input Fields with Ease

Angular Material offers a comprehensive set of pre-built components for creating modern, accessible web applications. But what if you want to go beyond the default styles and customize the look and feel of your buttons and input fields to perfectly match your brand? This is where Angular Material's flexible styling options come in.

This article will guide you through customizing the styles of buttons and input fields in Angular Material 15, empowering you to create visually appealing and user-friendly components that reflect your application's unique personality.

The Power of Themes and CSS Variables

Angular Material relies heavily on themes and CSS variables for its styling. This allows for a clean and efficient way to apply global styles across your application, while also offering granular control over individual components.

Let's start with a basic example:

<button mat-raised-button>Default Button</button>
<input matInput placeholder="Enter some text">

This code will render a standard Angular Material button and input field with their default styles.

Now, let's customize them:

1. Create a custom theme: In your angular.json file, within the projects section, find your project's configuration and add a custom theme:

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "styles": [
            "src/styles.scss" // Your main styles file
          ],
          "themes": [
            "src/theme.scss" // Your custom theme file
          ]
        }
      }
    }
  }
}

2. Define your custom styles in src/theme.scss:

@use '@angular/material' as mat;
@include mat.core();

$primary: #f44336; // Example primary color
$accent: #2196F3; // Example accent color
$warn: #FFC107; // Example warn color

$mat-theme: (
  color: (
    primary: (
      main: $primary
    ),
    accent: (
      main: $accent
    ),
    warn: (
      main: $warn
    )
  )
);

@include mat.all-component-themes($mat-theme);

This example creates a custom theme with custom colors for primary, accent, and warn colors. You can customize these to your heart's content.

3. Apply custom styles to buttons:

.my-button { // Define a custom CSS class for your button
  background-color: $primary;
  color: white;
  font-weight: bold;
}

4. Apply custom styles to input fields:

.my-input { // Define a custom CSS class for your input field
  border: 2px solid $primary;
  border-radius: 5px;
}

5. Use your custom styles in your HTML:

<button mat-raised-button class="my-button">Custom Button</button>
<input matInput placeholder="Enter some text" class="my-input">

Now, your button and input field will inherit the styles defined in the custom CSS classes, creating a unique and visually appealing experience for your users.

Additional Customization Options

Angular Material provides several additional ways to customize your buttons and input fields:

• Theming: Experiment with different colors, fonts, and sizes within your theme to create a cohesive look.
• Component-specific CSS: Use @host and ::ng-deep to target specific Angular Material components and apply styles directly.
• Angular Material theming options: Explore various Angular Material theming options like mat-button-toggle to customize the visual appearance of your buttons.

Remember, when customizing your components, it's important to prioritize usability and accessibility. Ensure your styles are consistent and maintain the original functionality of the components.

With its powerful theming system and vast customization options, Angular Material 15 empowers you to create beautiful and functional components that perfectly align with your application's needs.

For further exploration, check out the official Angular Material documentation: https://material.angular.io/guide/theming