Css styling affect cross components

Question

I have custom themed typography, applied for 2 of my components:

theme.scss:    
@mixin typography($theme) {
        $typography-config: mat.get-typography-config($theme);
        @include component-one.typography($typography-config);
        @include component-two.typography($typography-config);
    }

and then in component-one.component.css:

@mixin typography($config) {
     form {
        margin-bottom: mat.font-size($config, 'body-1');
    }
}

The problem is that also the form in component-two gets this style, although I don't want it to, and these 2 components are not related (not parent-child of any kind).

How can I avoid one styling effecting the second?

Thanks