With the new Enact UI version 4.7.4 margins are overridden to 0 by enact UI marquue class . Is there way to not let margin overridden by enact?

is there any way to fix this or overide this globally, since in 4.7.2 it was taking values as given ,

Hi @Darshan_Giri,

Marquee component is composed as below.

<div class="enact_ui_Marquee_Marquee_marquee">

    <div class="enact_ui_Marquee_Marquee_text">MARQUEE TEXT</div>


And in enact 4.7.4, we set margin of enact_ui_Marquee_Marquee_text to be zero.

Because the marquee is implemented under the assumption that both widths are the same, so enact_ui_Marquee_Marquee_text margin needs to be set to 0 to marquee contents properly.


anyway to overide it

hi, anyway to overide it globally

There are two ways to override margin values:

First, you can use the inline style as below.

    style={{margin: '100px'}}

Second, you can use CSS and MarqueeDecorator to override the margin value.

// Marquee.module.less
.marquee {
    margin: 100px;
    .text {

// App.js
import {MarqueeDecorator} from '@enact/sandstone/Marquee';
import css from './Marquee.module.less';

const NewMarquee = MarqueeDecorator({css: css}, 'div');



Hi, we havent used marquee explicitly , its implicitly getting masked for the componets, anyway to overide this globally

We may be able to support you better if you tell us your case(code snippet) that you need to override the marquee text's margin. Which component of the Moonstone library do you use?

we are giving margin here but marquee margin is getting used here which is 0 currently (marquee is overrriding our margins)