Border CSS overridden in component

[jclark42796]

In 4.0.7 the following could would render $123.45 with a double line on the bottom border. No border is rendered in 4.1.0. This seems due to the "border: false". Setting "border: true" will render a single line bottom border. Setting xtype to 'container' has no effect. For this to work, it needs to have a panel xtype, which seems more heavy weight than needed. BTW, I tried using 'cls' property, same effect as inline style.

Is there another way to style a lightweight component with the double bottom border?

Thanks,
Jim

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            items: [
                {
                  xtype: 'component',
                  html: '$123.45',
                  //cls: 'mycss',
                  style: 'height: 20px; border-bottom: 3px double black;',
                  border: false
                }
            ]
        });
    }
});

[scottmartin]

Please try the following:

.mycssbox {
    border-bottom: 3px double red !important;
}

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            items: [
                {
                  xtype: 'component',
                  html: '$123.45',
                  cls: 'mycssbox',
                  border: false
                }
            ]
        });
    }
});

Regards,
Scott.

[jclark42796]

Thanks, the !important did the trick.