Style an Ionic v3 Component on a Single Page

Instructor: [00:00] When you need to style a component or a tag on a specific page, we can use the Sass file that is bound to that particular template. I have a simple three-tab application, with each tab with a similar design.

[00:14] Let's make the Ion card title tag on the goalstone page bolder by setting the font weight value. Saving, we can see the text is bolder on the goalstone page, while the same tag on the other two tabs is the default weight.

[00:34] Now, styling some Ionic components can be more difficult. Sometimes, the property that we want to change is not easily accessible, or is bound to a Sass variable. Since we cannot override a Sass variable for just one instance, we need to see what actually makes up the component's DOM.

[00:54] Let's inspect the list item. We can see it's actually made up several divs, in addition to the actual h2 and paragraph tags. I want to change the color of the bottom border of each list item. We can see that this is set mid-div, and by the CSS classes of list-md, item-block, and item-enter.

[01:18] I will copy this class chain, and add it to my Sass file. I will also add the iOS chain as well. I will then set the border bottom to be two pixels, solid, and black. Saving, we can see the change.

[01:39] Another thing to note, sometimes due to the order of the cascade, we may need to include the !important override, to your rule for the style to take effect.