Styling Angular Component's Element from Main SCSS

Question

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?

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
– diopside, Commented Apr 24, 2018 at 21:05
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
– Rick, Commented Apr 25, 2018 at 13:58
Are you following the theming guide and theming your own components? Or are your simply trying to rewrite style sheets? — G. Tranter
– G. Tranter, Commented Apr 25, 2018 at 14:06
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
– diopside, Commented Apr 25, 2018 at 14:26
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
– Rick, Commented Apr 26, 2018 at 21:41

Rick · Accepted Answer · 2018-04-27 17:35:03Z

1

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);
}

answered Apr 27, 2018 at 17:35

Rick

2554 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Remi Sture · Accepted Answer · 2018-04-26 07:09:41Z

0

How about something like this in your components?

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

answered Apr 26, 2018 at 7:09

Remi Sture

13.1k5 gold badges27 silver badges38 bronze badges

1 Comment

Rick Over a year ago

Yeah, that works, but my goal was to hopefully lift that out of the component, and into the top-level "red-theme.scss" file so I don't have to run around tracking down components whenever I had to light up (or deprecate) a theme

Collectives™ on Stack Overflow

Styling Angular Component's Element from Main SCSS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related