Target child components and apply class

Hello,
I have a panel with Id="panel_id". It has components like, dropdown, textbox and grid. I want to change the color of all the .rx-textbox, rz-cell-data, rz-dropdown-items just inside the panel.

I tried the following css selectors, but none works.

  1. #panel_id ::deep(.rz-textbox)
  2. #panel_id * .rz-textbox

When I change just .rz-textbox, the style applies, but it happens throughtout the application. I dont want that.

can you please guide me.

Thanks!

According to the docs the syntax should be:

::deep .rz-textbox
{
}

This requires using a CSS file scoped to the current component.