Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Style an Ionic Component on a Single Page

    Chris GriffithChris Griffith

    Learn how to style an Ionic Component on a single page. Also, see how to inspect and then override a CSS value for an existing Ionic component.

    ionicIonic
    ^3.0.0
    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss