Is there a way to apply recipes to existing classes?

[mayteio]

Might be a silly question since I know the recipes generate a class name. But for example, we've got our internal recipes like textField() that apply styles to make text fields on-brand. We also use HubSpot (and could be any 3rd party tool really) to build some forms, and I'd like the forms to be identical.

Problem is, the form is loaded through a script and only supplies us with classes like .hubspot-input.

Is there a way to apply the same styles to my native text-field components as other HTML elements I don't control? i.e.

<Box className={css({ "& input": textField()  })}>
  <input type="text" data-scope="editable" data-part="input" />
  <HubspotForm />
</Box>

Where I don't control the classes in the hubspot form.

[anubra266]

@mayteio this is not possible. you'd have to edit the recipe to target child inputs instead. i.e. Let this & input be in your recipe