如何为Angular 4应用中的非Material组件应用Angular Material 2主题？

Great question! Since you already have your Material themes set up in theme.scss, extending those styles to non-Material components is straightforward—here are three practical methods to do it:

1. Reference Theme Variables Directly #

Your defined palette variables ($primary-color, $accent-color, etc.) are packed with all the color values from Material's palette system. You can use the mat-color() function to pull specific shades from these palettes in your non-Material component styles.

First, make sure you import your theme file into the component's SCSS (adjust the path to match your project structure):

// In your non-Material component's .scss file
@import '../../styles/theme.scss';

.custom-button {
  // Use the default primary color
  background-color: mat-color($primary-color);
  // Pull a lighter shade of the accent color
  border-color: mat-color($accent-color, lighter);
  // Use the foreground text color from your light theme
  color: mat-color($light-theme.foreground, text);
  padding: 8px 16px;
  border-radius: 4px;
}

The mat-color() function takes the palette as the first argument, and optionally a shade key (like lighter, darker, A100) as the second.

2. Convert Theme Colors to CSS Custom Properties #

For even broader reuse (including in vanilla CSS or inline styles), you can export your Material theme colors as global CSS variables. Add this to your theme.scss after defining your themes:

// At the end of theme.scss
:root {
  --mat-primary: #{mat-color($primary-color)};
  --mat-primary-light: #{mat-color($primary-color, lighter)};
  --mat-accent: #{mat-color($accent-color)};
  --mat-warning: #{mat-color($warning-color)};
  --mat-text-primary: #{mat-color($light-theme.foreground, text)};
}

Now you can use these variables anywhere in your app's styles, even in non-SCSS files:

.custom-card {
  background-color: var(--mat-primary-light);
  color: var(--mat-text-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

3. Create a Reusable Theme Mixin #

If you have multiple non-Material components that need consistent theme styling, a SCSS mixin will help you avoid repetition. Add this to your theme.scss:

@mixin apply-material-theme($theme) {
  // Extract foreground and background maps from the theme
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
  $primary: map-get($theme, primary);

  // Apply styles to your custom component class
  .custom-themed-component {
    background-color: mat-color($background, card);
    color: mat-color($foreground, text);
    border: 1px solid mat-color($primary, lighter);
    padding: 16px;
    border-radius: 4px;
  }
}

Then include the mixin in your global style.scss or component styles to apply the theme:

// In style.scss
@include apply-material-theme($light-theme);
// Or for dark mode: @include apply-material-theme($dark-theme);

Just a quick note: Double-check your import paths when referencing theme.scss in component files—Angular CLI projects typically place theme files in src/styles/, so adjust paths like ../styles/theme.scss as needed.

内容的提问来源于stack exchange，提问作者yazz