You can update the styles of the child component via the parent component using the following,

• The ::ng-deep pseudo-class. As applying it to any CSS rule completely disabled view-encapsulation for that rule. In order to scope the specified style to current component and its descendants, add the :host selector before ::ng-deep, as without it the applied styles can bleed to other components.
• Applying ViewEncapsulation.None inside the component in which the child component is being loaded.

Therefore using the above mentioned approaches, you can modify the styles for app-search-footer as shown in the code snippets below,

• Using the ::ng-deep pseudo-class,

In the file component.css,

::host ::ng-deep app-search-footer {
  /* Add required CSS rules */
}

• Using ViewEncapsulation.None

In the file component.ts,

import {
  Component,
  ViewEncapsulation,
  OnInit
} from '@angular/core';

@Component({
      selector: 'app-root',
      templateUrl: '<div class="container"><app-search-footer></app-search-footer></div>',
      styleUrls: ['`.container .app-search-footer-container { /* Required CSS rules */ }`'],
        encapsulation: ViewEncapsulation.None
      }) 
export class Component implements OnInit {

  ngOnInit(): void {
  
  }
}

You can e.g. use Input to control this like

<app-search-footer version='search'></app-search-footer>

In the component:

@Input() version: 'search' | 'footer' = 'footer';

In the component template at the respective spots:

class="some-element {{version}}"

In the css (scss in this case) e.g.:

.some-element {
  &.search {
    background-color: red;
  }

  &.footer {
    background-color: green;
  }
}

How to best do this of course also depends on what needs to be changed (like if it is the whole component or very specific parts of it).
If it is the whole component, you could also simply do <app-search-footer class='search'></app-search-footer>.

There are quite a few ways to accomplish things like this before having to rely on :host ::ngdeep.

also if you want to change the data in only one component without affecting the other one you can also use @Input decoratos to achieve that

this is my search panel <app-search-footer> which im going to use also as a footer but with a little bit of tweaks

this is also my <app-search-footer> component but here im using it as a footer and as you can see from the image, i added a horizontal rule new logo image and three new paragraphs (Terms os Use, Privacy Policy and About Us) i did this by adding these Input() variables in my search-footer component.ts file

@Input() termsOfUse = '';
@Input() privacyPolicy = '';
@Input() aboutUs = '';
@Input() hr: boolean = false;
@Input() footerImage = '';

in my html file i added these

<img src="{{footerImage}}" class="brand" alt="">
<hr style="color: #ffffff;" *ngIf="hr">
<p class="footer-pargraphs">{{termsOfUse}}</p>
<p class="footer-pargraphs">{{privacyPolicy}}</p>
<p class="footer-pargraphs">{{aboutUs}}</p>

when i reused this component as footer i just binded my data to the inputs of the search-footer component like so

<app-search-footer [termsOfUse]="'Terms of Use'" [hr]=true [footerImage]="'assets/download.png'" [privacyPolicy]='"Privacy Policy"' [aboutUs]="'About us'" *ngIf="!collapsed" ></app-search-footer>

and i was able to modify the footer without affecting my search panel. The one downside to this is that in your base component (search-footer in my case) there will be elements with empty values and therefore will be empty space in your DOM.