Styling Angular Component's Element from Main SCSS

0
votes

I'm struggling with something in my Angular 5.x app, and hope someone can help...

I've got a component that has a mat-raised-button, and currently I've got some styling for it within the component's SCSS file:

button-themed {
background-color: black;
color: white;
border-color: red;
border-style: solid;
border-width: 1px;}

Everything looks fine that way. However, I now want to shift that styling up to some theme SCSS files I'm working on. How can I get the styling to apply when it's in my "red-theme.scss" or "blue-theme.scss" files?

(I'm looking to be able to dynamically swap between themes and want the button to adjust according to the theme)

UPDATE

I kicked the tires some more on custom theming, and am getting nowhere. What am I missing? Below is some quick test stuff I tossed together (I'm simply trying to get the button's border to change color so I can see that the process works).

settings.component.scss:

.test-button {
    border-style: solid;
    border-width: 1px;
}

settings.theme.scss:

@mixin test-theme($theme) {
  $primary: map-get($theme, primary);
  $warn: map-get($theme, warn);
  .test-button {
    background-color: mat-color($primary);
    color: mat-color($warn);
    border-color: mat-color($warn);
  }
}

settings.component.html:

<button mat-raised-button class="test-button">TEST</button>

red-theme.scss:

$test-primary: mat-palette($mat-pink, 800, 300, 900);
$test-accent: mat-palette($mat-pink);
$test-warn: mat-palette($mat-indigo, 600);
$test-theme: mat-light-theme($test-primary, $test-accent, $test-warn);

styles.scss:

@import '~@angular/material/theming';
@import 'themes/color-palettes.scss';
@include mat-core();
@import 'app/pages/settings/settings.theme.scss';
@mixin custom-components-theme($theme) {
  @include test-theme($theme);
}
@import 'themes/red-theme.scss';
.red-theme {
  @include angular-material-theme($test-theme);
}

It compiles and my button displays, but there's no color change to the button's border (even though other Material components have changed color on the page). Can anyone help nudge me in the right direction?

2
cssangularsassangular-material
I'm not exactly clear on what you're asking, but in general, for the ability to dynamically switch between themes, I'll conditionally apply a class specifying which theme is chosen to the root element of my angular app (usually a wrapper around everything in app.component.html) and then within each individual component's css files, you can use the :host-context selector to conditionally style them based on what class has been set on the root of the app. Is that what you mean? - diopside
That works, but I'm trying to put the color styling within a "red-theme.scss" file which lives at the root of my project, and is imported into my core "style.scss" file. Basically, I can get things to work only if the styling resides within the component's folder, but not if it's outside. I don't want to have to go track down all the components and modify them individually when I spin up a new theme. I want to just create a "new-theme.scss" file and do all the color styling for that particular theme in the single file. Does that make sense? - Rick
Are you following the theming guide and theming your own components? Or are your simply trying to rewrite style sheets? - G. Tranter
Rick, then you'd have to change the ViewEncapsulation setting to 'None' - but then you lose out on the many benefits of the Shadow DOM. With default ViewEncapsulation settings, components only see the styles associated with their own CSS files, and the master styles.css file for your whole app. - diopside
G. Tranter - I've got a few stylings that I'm trying to have adjust when my theme changes. And I haven't been able to figure out how to do them using theming. Have any examples of how to style a border around a button? Or maybe set the background color of a snackbar? - Rick

2 Answers

1
votes

One of those "argh!" moments, but I thought I'd post this as an answer in case anyone stumbles upon this post... The custom component mixin is the way I'm going at this point in time. I'm hopeful I can figure out all the other items I'll have to custom theme.

The reason my first test (shown in my original post) didn't work is because I forgot to add the line to actually import my custom component theme within styles.scss:

.red-theme {
  @include angular-material-theme($test-theme);
  @include custom-components-theme($test-theme);
}
0
votes

How about something like this in your components?

:host-context(.theme-light) p {
   background-color: white;
}
:host-context(.theme-dark) p {
   background-color: black;
}