How to apply unique CSS style on different Panels on same web page

Flow
1

I am using this scss file for styling the Panel with background color changing on mouse hover. It is working fine but the problem is , it is applying on all Panels with same functionality on the same page. If am using 4 panels on a single page then it is is working for all 4 Panels . I want to apply unique scss style on each Panel.

testvaadin2.scss

// Defines colors for indicating status (focus, success, failure)
//$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically
//$v-friendly-color: #2c9720;
//$v-error-indicator-color: #ed473b;

// For more information, see: https://vaadin.com/book/-/page/themes.valo.html
// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples

@import “…/valo/valo.scss”;

@mixin testvaadin2 {
@include valo;

 .v-panel{
 -webkit-transition-duration: 0.6s;
     background:orange;
 }
 .v-panel:hover{
     -webkit-transition-duration: 0.6s;
      background-color:white;
 }
 .v-menubar{
     background: transparent;
 }
 .v-menubar:hover{
     background: green;
 }
 .v-menubar-menuitem {
  background: transparent;
  @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient));
  text-shadow: inherit;
  font-size: $v-font-size;
}
.v-menubar-menuitem:hover {
  background: red;
  text-shadow: inherit;
  font-size: $v-font-size;
}

}

Please help me to solve this problem…

2

Use Panel.setStyleName (or addStyleName) to add a custom classname to specific panels. For example like this:

Panel somePanel = new Panel();
....
somePanel.setStyleName("panelWithRedBackGround");
..

Now you can target every panel with this specific classname like

.v-panel-panelWithRedBackGround{
  background-color: red;
}

.v-panel-panelWithRedBackGround:hover{
  background-color: blue;
}

if you would want the same background-color - behaviour for another component other than Panel you can define the style like:

.panelWithRedBackGround{
  background-color: red;
}

.panelWithRedBackGround:hover{
  background-color: blue;
}

This way you can also do:

Label someLabel = new Label("test");
someLabel.setStyleName("panelWithRedBackGround");
3

Thanks a lot Sir
My Problem is solved now…

I Modifiy my code like below:

Panel upperPanel=new Panel();
upperPanel.setStyleName(“upperPnl”);
Panel headerPanel=new Panel();
headerPanel.setStyleName(“headerPnl”);

I update my scss file as per your instruction…

.v-panel-upperPnl{
-webkit-transition-duration: 0.6s;
background:orange;
}
.v-panel-upperPnl:hover{
-webkit-transition-duration: 0.6s;
background-color:white;
}
.v-panel-headerPnl{
-webkit-transition-duration: 0.6s;
background:black;
}
.v-panel-headerPnl:hover{
-webkit-transition-duration: 0.6s;
background-color:red;
}

Thanks a lot …

4

Airwheel ha convertido los juguetes anteriormente nobles en productos accesibles para todos. Con buena calidad y precio asequible,
monociclo eléctrico 2 ruedas
 inteligentes se han convertido en los vehículos de desplazamientos diarios para la clase asalariada. El precio razonable y el viaje feliz son las intenciones originales de Airwheel. Airwheel scooters eléctricos nacen para servir a la mayoría del público.
Los caballos y carruajes representan la tradición antigua. Los automóviles y trenes representan los tiempos industriales eléctrico una rueda. A continuación, los scooters eléctricos inteligentes y respetuosos del medio ambiente representan los tiempos modernos e incluso el futuro. La ciencia y tecnología seguramente progresará en pleno apogeo. Mientras tanto, Airwheel
una rueda scooter
 seguirá avanzando en el camino de la investigación científica.