CODEWITHSUNDEEP
angular-materialmaterial-designangular-material-6angular-material-5angular-material-7
Canolyb1
Canolyb1

Reputation: 724

How to theme angular material component shapes?

Is there any way to theme component shapes in angular material? I know material design has a shape concept that allows you to create more rounded, less rounded or even cut corners for all small/medium/large components. Is there a way to implement that in angular material?

If not then what is the best way to customize a component globally in angular material? Say I want to remove the rounded corners on all <mat-button>'s?

Upvotes: 8

Views: 12692

Answers (3)

ahtukullep
ahtukullep

Reputation: 21

2025 answer:

just override a required token:

:root, :host {
  @include mat.theme-overrides((
    corner-extra-large: 0px,
    corner-extra-large-top: 0px,
    corner-extra-small: 0px,
    corner-extra-small-top: 0px,
    corner-full: 0px,
    corner-large: 0px,
    corner-large-end: 0px,
    corner-large-start: 0px,
    corner-large-top: 0px,
    corner-medium: 0px,
    corner-none: 0px,
    corner-small: 0px
  ));
}

you can take a look how they do it under the

....................................................................
/// Emits the system-level CSS variables for each of the provided override values. E.g. to
/// change the primary color to red, use `mat.theme-overrides((primary: red));`
@mixin theme-overrides($overrides, $prefix: definition.$system-fallback-prefix) {
  $sys-names: map-merge-all(
      definitions.md-sys-color-values-light(),
      definitions.md-sys-typescale-values(),
      definitions.md-sys-elevation-values(),
      definitions.md-sys-shape-values(),
      definitions.md-sys-state-values());

  & {
    @each $name, $value in $overrides {
      @if (map.has-key($sys-names, $name)) {
        --#{$prefix}-#{$name}: #{map.get($overrides, $name)};
      }
    }
  }
}
....................................................................
//
// Design system display name: Material 3
// Design system version: v0.161
//

@function values($exclude-hardcoded-values: false) {
  @return (
    'corner-extra-large': if($exclude-hardcoded-values, null, 28px),
    'corner-extra-large-top':
      if($exclude-hardcoded-values, null, (28px 28px 0 0)),
    'corner-extra-small': if($exclude-hardcoded-values, null, 4px),
    'corner-extra-small-top':
      if($exclude-hardcoded-values, null, (4px 4px 0 0)),
    'corner-full': if($exclude-hardcoded-values, null, 9999px),
    'corner-large': if($exclude-hardcoded-values, null, 16px),
    'corner-large-end': if($exclude-hardcoded-values, null, (0 16px 16px 0)),
    'corner-large-start':
      if($exclude-hardcoded-values, null, (16px 0 0 16px)),
    'corner-large-top': if($exclude-hardcoded-values, null, (16px 16px 0 0)),
    'corner-medium': if($exclude-hardcoded-values, null, 12px),
    'corner-none': if($exclude-hardcoded-values, null, 0),
    'corner-small': if($exclude-hardcoded-values, null, 8px)
  );
}

Upvotes: 2

Mario B
Mario B

Reputation: 2355

The accepted answer was good for Angular Material 2, but there is a different way for Version 3. They heavily use "design token", implemented as CSS-custom-properties. The idea is that you can heavily customize the styling of components via simple css-properties and this is the only recommended way to style Angular Material v3 - the official documentation clearly warns you to directly override css classes Angular Material - Direct Style Overrides. As someone who got bitten in the past I can only warn you to follow this recommendation as much as possible, or you will feel pain during updates.

The official documentation was updated and now includes a style section, where you can see all tokens supported for each component: Angular Material - Button styling

For example you can change the shape like so:

html {
  --mdc-outlined-button-container-shape: 0px;
}

to change this globally for your whole site OR

.some-class {
  --mdc-outlined-button-container-shape: 0px;
}

to change it only for a part of your page. This is a really good solution in my opinion and you can drastically change the design of components with a few css-properties

Upvotes: 2

G. Tranter
G. Tranter

Reputation: 17958

The short answer is that Angular Material does not provide a straightforward way of doing this.

"Theming" in Angular Material is limited to color and typography. Shapes, spacing, sizes, borders, and so on are in a way "hard-coded." However, almost all of those things end up being CSS, and of course there's always a way to customize CSS. For example define some global style that does something like:

button.mat-button {
   border-radius: 0;
}

Then do that for every component and every property that you want to customize.

Note that it won't always be so straightforward because you'll need to know the internal DOM and class structure of all the components in order to apply the style where it needs to be. You'll also need to know all the component options and how they change the DOM and class structure. On top of that, some components dynamically inject style using ngStyle and that may be impossible to override.

Long story short - "redesigning" Angular Material is at best a lot of work, and more realistically not 100% achievable. If Angular Material isn't quite what you want, use something else.

Upvotes: 13

Related Questions