How can I target a child class from the parent class in styled-components?

Question

This is pretty straight forward question in CSS so I kind of surprised it's proving to be difficult in styled-components. I would like to apply styles to MultiWrapper, but only when it's a child of FormWrapper. According to the documentation. All I need to do is reference the class in FormWrapper. Below is the relevant code. My React component calls both these functions and when the condition is true FormWrapper is the parent to multiple MultiWrapper classes that are next to each other. What am I doing wrong?

const renderFormType = form => {
    if (form.type === 'text') {
      return (
        <MultiWrapper key={form.prop}>
          <TextInput
            form={form}
            register={register}
            errors={errors}
          />
        </MultiWrapper>
      );
    }
    if (form.type === 'dropdown') {
      return (
        <MultiWrapper key={form.prop}>
          <Dropdown
            form={form}
            register={register}
            errors={errors}
          />
        </MultiWrapper>
      );
    }
    if (form.type === 'checkbox') {
      return (
        <MultiWrapper key={form.prop}>
          <Checkbox
            form={form}
            register={register}
            errors={errors}
          />
        </MultiWrapper>
      );
    }
    return null;
  };

  const multiForms = form => (
    <fieldset form={form.prop}>
      <Legend>{form.question && `${form.question}.`} {form.label}</Legend>
      <FormWrapper>
        {form.multiTypes.map(multi => renderFormType(multi))}
      </FormWrapper>
    </fieldset>
  )



 export const MultiWrapper = styled.section`
   display: flex;

`;

export const FormWrapper = styled.section`
  display: flex;

    ${MultiWrapper} {
      & + & {
        margin-left: 1rem;
      }
    }
`;

Answer 1

If you wish to add margin-left: 1 rem; to MultiWrapper only when it is a child of FormWrapper, all you have to do is the following:

export const FormWrapper = styled.section`
  display: flex;

    ${MultiWrapper} {
      margin-left: 1rem;
    }
`;

see https://codesandbox.io/s/mystifying-kapitsa-sjqjhp