Components: How can I style the components / change the SCSS variables ?

[praveenpuglia]

It might be silly to ask but how do I style the components and change values in _variables.scss. For example, for bootstrap, I am doing this.

@import "theme";
@import "../../node_modules/bootstrap/scss/bootstrap";

The theme file contains the modified variables and bootstrap get's compiled with those modifications. How do I achieve something similar here?

[msegers]

As far as I know this is not yet supported, note that this project is in Alpha stage. I have no authority here but as far as I've seen comments you should see this feature in beta or late alpha. Then you'd probably get a service instead of including the scss.

[praveenpuglia]

I understand it's in alpha. I was just not sure whether there is already support for this and I was unable to figure this out. So for now, if I need a workaround, what would that be?

[msegers]

It's not pretty, but what I do is just overriding the generated css... Which requires important and is quite fiddly to be fair.

I'm not sure if there is a way to replace the default values by firing a bash script or something which replaces the values in node_modules. Meh.

[praveenpuglia]

That's sad. I can't even think of doing it and reliably change things. I guess this issue should be open till we have a way to customize the styles in a better way.

[praveenpuglia]

closing this because #123 exists.

[aldo-roman]

@praveenpuglia #123 is unrelated. It is now closed and there is still no way to style components the variables as intended in this issue description. Is there any news or can we consider reopening?

[VadimDez]

@aldo-roman , +1.
Agree #123 is about color theming, should be the way to override other variables.

[msegers]

Just don't start commenting on a year old closed bug. In this case people wanted to adjust colours as far as I know right now there is not much support for others, but expect more features once it's all stable 'n stuff.

[aldo-roman]

@msegers this issue is about overriding default variables (toolbar height, button padding, etc) which are configurable in other frameworks btw (see bootstrap sample above). Can we reopen/consider as a feature request?

The issue is not "a year old", come on.

[tsvetan-ganev]

I found a workaround, which is far better than using !important in every statement or copy-pasting the same style definitions in the components which are consuming Material Design elements. I am using the Angular CLI (v1.0.0) but it should work with the corresponding Webpack configuration as well.

1. Create a separate .css file where you will override the default material component styles. Let's say md-card.override.css. For example:

/* css/card.override.css */
.mat-card-header {
  margin-bottom: 24px;
}

.mat-card-header .mat-card-title {
  font-size: 24px;
}

.mat-card-header .mat-card-subtitle {
  font-size: 16px;
}

1. Go to the component where you want the new styles applied to md-card. You should create a component level stylesheet if you haven't done so.

@Component({
  moduleId: module.id,
  selector: 'my-component',
  templateUrl: 'my-component.component.html',
  styleUrls: ['my-component.component.css']
})

1. In the my-component.component.css file, import the stylesheet which overrides the default md-card styles.

/* my-component.component.css */
@import 'path/to/css/card.override.css';

Now you will have your custom styles applied to the md-card inside your component. ✨

[msegers]

@aldo-roman Well it's not up to me, at time of writing it's over 9 months old which is nearly a year in my head. They will probably provide more but it still is beta. So it won't be a priority soon.

[stephengardner]

Updates? Updates...

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}