Scss doesn't work per component

Ionic Framework ionic-v3
1

I’m trying to add scss per component:

the poem-detail.scss

.title
{
    display: flex!important;
    align-content: center!important;
    align-items: center!important;
    font-size:9px;
}

the poem-detail.html

ion-title class=“title”>{{poem.author}} </ion-title

unfortunately , the style looks not applied. I lookup somewhere on stackoverflow and here, in the latest ionic2 , we just need to kill the line :styleUrls:[…]. so I don’t know what else I need to do .anything wrong here ?

thank you very much

2

how can I input html tag here ? :expressionless:

3

Did you import your poem-detail.scss into your app/app.scss?

4

Every time I have been tempted to use !important, two weeks later I yelled at myself. So I would recommend to stop using it. Are you sure that the selector defined in your component is matching how it is being used in enclosing templates?

5

I am not quick sure the meaning of the syntax, I just would like to align the text in center, even I remove the !important , it doesn’t work.
looks it’s totally not match

6

in latest ionic2 , I 'm sure I don’t need to import it to app.scss.

7

Yes, you are right. I must have missed that change :sleeping:.

8

With your CSS, you could try:

.title .toolbar-title {
    text-align: center;
   font-size:9px;
}

This worked for me.