Flex - настройка полосы прокрутки, используемой внутри компонента, с помощью CSS

Question

то, что я пытаюсь сделать, это настроить внешний вид полосы прокрутки ТОЛЬКО при отображении внутри конкретного компонента. Я не хочу менять внешний вид всех остальных полос прокрутки моего приложения.

У меня есть панель, внутри этой панели есть VBox, и полоса прокрутки появляется внутри этого vbox, и я хочу стилизовать только эту полосу прокрутки с помощью CSS.

Я попытался добавить что-то вроде этого в моем компоненте (тест только для удаления стрелок вверх и вниз от скроллера):

<fx:Style> 
    @namespace s "library://ns.adobe.com/flex/spark"; 

    s|Scroller 
    { 
    up-arrow-skin: ClassReference("undefined"); 
    down-arrow-skin: ClassReference("undefined"); 
    } 

</fx:Style> 

результатом является предупреждением, что говорит:

CSS type selectors are not supported in components: 'spark.components.Scroller' 

Я искал и узнал, что я должен использовать селекторы классов вместо селекторов типов внутри компонента, но я не хочу создавать пользовательские полосы прокрутки (как я должен использовать это?).

EDIT: Я добавляю пример моего кода с проверкой селектора класса CSS:

<fx:Style> 
    @namespace s "library://ns.adobe.com/flex/spark"; 
    @namespace mx "library://ns.adobe.com/flex/mx"; 

    .noArrowsScroller 
    { 
    up-arrow-skin: ClassReference("undefined"); 
    down-arrow-skin: ClassReference("undefined"); 
    } 


</fx:Style> 

<fx:Declarations> 
    <!-- Place non-visual elements (e.g., services, value objects) here --> 
</fx:Declarations> 

<mx:VBox width="100%" height="100%" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20" 
     horizontalAlign="center" verticalAlign="middle"> 


    <s:BorderContainer borderWeight="1" width="100%" height="100%" borderColor="0x79A8BD"> 
     <mx:VBox width="100%" height="100%" id="generalVBox" horizontalAlign="center" 
       minHeight="0" horizontalScrollPolicy="off"> 

     </mx:VBox> 
    </s:BorderContainer> 
</mx:VBox> 

VBox «generalVBox» является тот, в котором я хочу, чтобы мои подгонять полосы прокрутки появляться.

В этом vBox добавляются во время выполнения несколько компонентов, которые могут вызвать появление полосы прокрутки.

Как я должен применить свой селектор классов «noArrowsScroller»?

EDIT 2: После комментариев Sunil я попробовал поместить компонент Scroller, завершающий контейнер VGroup, и используя селектор классов, называемый noArrowsScrollbar, но стиль полосы прокрутки остается тем же. Я пробовал установить цвет также в моем селекторе классов, а свойство THAT работает, возможно, я использую неправильные свойства CSS?

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" width="100%"  height="100%" 
      creationComplete="application1_creationCompleteHandler(event)"> 

<fx:Script> 
    <![CDATA[ 
     import mx.controls.Label; 
     import mx.controls.LinkButton; 
     import mx.events.FlexEvent; 



     protected function application1_creationCompleteHandler(event:FlexEvent):void 
     { 
      if(v != null) 
      { 
       for(var i:int = 0; i < 100; i++) 
       { 
        var lbl:Label = new Label(); 
        lbl.text = String(i); 

        v2.addElement(lbl); 
       } 
      } 
     } 

    ]]> 
</fx:Script> 

<fx:Style> 
    @namespace s "library://ns.adobe.com/flex/spark"; 
    @namespace mx "library://ns.adobe.com/flex/mx"; 

    .noArrowsScroller 
    { 
     down-arrow-skin: ClassReference("undefined"); 
     up-arrow-skin: ClassReference("undefined"); 
     color: red; 
    } 


</fx:Style> 

<fx:Declarations> 
    <!-- Place non-visual elements (e.g., services, value objects) here --> 
</fx:Declarations> 



<s:Panel width="50%" height="50%"> 
    <s:Scroller styleName="noArrowsScroller" 
       focusEnabled="false" 
       hasFocusableChildren="true" 

       height="100%" 
       horizontalCenter="0" verticalCenter="0"> 
     <s:VGroup width="100%" height="100%" id="v2" minHeight="0"> 

     </s:VGroup> 
    </s:Scroller> 
</s:Panel> 

Благодаря

Answer 1

селекторы типа CSS не допускаются в компонентах .. Все, что вы можете сделать, это: селектор использование класса вместо или Попробуйте положить его в CSS корневого уровня в MXML.

Answer 2

Теперь, когда вы используете Scroller и VGroup, вам просто нужно исправить синтаксис, который вы используете на отключенное/удалить элементы:

Попробуйте это:

.noArrowsScroller 
{ 
     down-arrow-skin: ClassReference(null); 
     up-arrow-skin: ClassReference(null); 
}