Applying CSS to SAPUI5 button

[fahad_saplearning]

Hello All,

I am trying to change the color of button text by applying css to sap.m.Button. For this, I have created css file with following content and included it using index.html.

      .myRedButton {

         color: red;

      } 

Then I tried to apply the color to the button as follows:

<Button class="myRedButton" text="Press Me"/>

However, the button text always comes with default color. When I inspected the button using chrome, I can see the color attribute from my custom class is striked out and it is picking up color from standard sapMBInner class (highlighted the details in the following image)

If i disable color attribute from sapMBtnInner class (from chrome), it is picking up myREdButton class and the button text changes to red.

I don't want to redefine sapMBtnInner class as it would affect all the buttons. Can you please tell me what is wrong in my implementation.

Regards,

Faddy

[Former Member · Accepted solution]

Hi Faddy

Will this simple example help?

JS Bin - Collaborative JavaScript Debugging

[fahad_saplearning · Accepted solution]

Hi Dennis,

That resolved my issue. I have tried in similar ways before. But the mistake which I made was, I did not put space between .myRedButton and .sapMBtnInner.

Thanks for your help

Regards,

Faddy

[Former Member]

Hey Faddy,

You can use this as a sample:

.myRedButton .sapMBtnInner{

  background-color: #d0312a !important;

  border-color: #d0312a !important;

  background-image: none !important;

  text-shadow: none !important;

}

.myRedButton > .sapMBtnHoverable {

    background-color: #A71B14 !important;

    background-image: none;

}

Regards

Ugur

[fahad_saplearning]

Thanks Ugur. Issue is resolved.

[junwu]

.myRedButton {

         color: red !important;

      } 

[fahad_saplearning]

Hi Jun,

It did not work. Also, Web IDE showed a warning for the usage of !important. I have cleared browser cache and tried once again, still no luck. Also in chrome inspect mode, !important is striked out along with my custom class attribute

Please note that I am using Web IDE for this.

Regards,

Faddy

[junwu]

go to computed tab to see which css win for color.

[fahad_saplearning]

Hi Jun,

Please find the details.

Regards,

Faddy