jelbourn / material2-app

Simple app that consumes Angular Material 2 components
651 stars 280 forks source link

md-checkbox, md-radio not the same demo #31

Closed n2lose closed 7 years ago

n2lose commented 7 years ago

I have tried :

<md-card>
  <button md-button>FLAT</button>
  <button md-raised-button md-tooltip="This is a tooltip!">RAISED</button>
  <button md-raised-button color="primary">PRIMARY RAISED</button>
  <button md-raised-button color="accent">ACCENT RAISED</button>
</md-card>

<md-card>
  <md-checkbox>Unchecked</md-checkbox>
  <md-checkbox [checked]="true">Checked</md-checkbox>
  <md-checkbox [indeterminate]="true">Indeterminate</md-checkbox>
  <md-checkbox [disabled]="true">Disabled</md-checkbox>
</md-card>

<md-card>
  <md-radio-button name="symbol">Alpha</md-radio-button>
  <md-radio-button name="symbol">Beta</md-radio-button>
  <md-radio-button name="symbol" disabled>Gamma</md-radio-button>
</md-card>

but it still show the input orginal style on chrome/Window 10: md-checkbox-radio

Here is my css theme:

@import '~@angular/material/core/theming/all-theme';

@include md-core();

$candy-app-primary: md-palette($md-indigo);
$candy-app-accent:  md-palette($md-pink, A200, A100, A400);

$candy-app-warn:    md-palette($md-red);

$candy-app-theme: md-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

@include angular-material-theme($candy-app-theme);

.m2app-dark {
  $dark-primary: md-palette($md-pink, 700, 500, 900);
  $dark-accent:  md-palette($md-blue-grey, A200, A100, A400);
  $dark-warn:    md-palette($md-deep-orange);

  $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);

  @include angular-material-theme($dark-theme);
}

What's wrong in my code? My environment: "@angular/material": "^2.0.0-beta.1", angular cli: "version": "1.0.0-beta.24",

n2lose commented 7 years ago

I just fixed it by the way import directly the pre-built theme: <link href="https://rawgit.com/angular/material2-builds/master/core/theming/prebuilt/indigo-pink.css" rel="stylesheet"> in the app.component.html

kootenpv commented 7 years ago

though it works, that couldn't be an "official" solution?