Building Material Themed Components
If you’ve pulled in Material Design Components into your Angular application,
you inevitability will find youself wanting to keep your component’s colors consistant with the theme of the rest of you application. In this post I will show you how to create themed components using the existing theme mixins provided by Material. This will not work if you’re using one of the built-in themes.
If you already know the basics you can skip down to Building a Themed Component
For this project we are going to use the Angular CLI to build your project. However, this tutorial will work with any project.
To start create a fresh Angular CLI project and follow the Getting Started Guide steps one through three.
Next we will create a new file named
theme.scss file in the
./src folder of your Angular project. This file will provide the theme for our application.
angular-cli.json and add a reference to
theme.scss and add the candy-app theme provided in the material theme guide.
app.component.html and add a button to verify the setup.
npm start and verify your builds and displays renders the page below.
Now with our application is configured with a Material Theme we can build a component to utilize our theme.
First, create a new component in your project called
UserComponent. This component is simply going to take an
name and display it within a
app.module.ts to include your new component, and drop your component into
So far we’ve added Material and created a new compnent that has some styles defined. Next we are going to add the secondary color from our Material Theme and add it as the background to the component.
First, create a new file called
user.component-theme.scss. It’s important to note we are not using the existing
Understand that we are seperating the concerns of the stylesheets, the
user.component.scss will be responsible all our non-theme CSS styles, and the
user.component-theme.scss is used for all themed CSS styles, defined by our Material theme.
Just to reitterate, it’s fine to have color properties in
user.component.scss but just not ones specific to your material theme, e.g. a green border from our example.
user.component-theme.scss and add the following:
theme.scss and import the mixin.
Success, we now have a Material themed component.