Select Parent section and add style to nearest children

[ZaheerNiazi007]

Hey @artf Is there any way to select a component and only apply styles to its nearest children? Whenever I try to add a style, it also adds the width to the selected component and its children together. I want to select the

element and apply the style only to its children.
Thanks
Please help, it’s urgent.

Here’s my code:

if (prop.getName() === "width") {
  const widthValue = hasValue ? value : "100%";
  inputToRender = (
    <FormControl fullWidth size="small">
      <Select value={widthValue} onChange={onChange}>
        <MenuItem value="100%">Full Page</MenuItem>
        <MenuItem value="90%">Wide</MenuItem>
        <MenuItem value="80%">Medium screens</MenuItem>
        <MenuItem value="50%">Small screens</MenuItem>
        <MenuItem value="25%">Extra Small screens</MenuItem>
      </Select>
    </FormControl>
  );

  const selectedComponent = editor.getSelected();

  if (selectedComponent) {
    const children = selectedComponent.get("components");

    children?.each((child) => {
      if (child !== selectedComponent) {
        console.log("Child:", child);
        child.addStyle({
          width: `${widthValue}%`,
        });
      }
    });
  }

  return inputToRender;
}

its also add style in section i want to select section but want to add style in section nearest children

[artf]

I see some problematic code there. Looks like you're performing updates to the editor state during react rendering step?! That's not good.

I think you all you need to do is to move/update your custom logic inside onChange.
I guess right now, your onChange is the one updating the selected component + your updates to children components below.