In React, props (short for "properties") is a way to pass data from a parent component to a child component. It allows components to be reusable and enables the flow of information between different parts of the application. Props are read-only and cannot be modified by the child component. You can think of props as similar to function arguments, where the parent component passes data to the child component when it is rendered.

Here is an example code snippet in JavaScript:

javascript
 
 
Copy code
// Parent component
function App() {
  const name = "John";
  return <ChildComponent name={name} />;
}

// Child component
function ChildComponent(props) {
  return <h1>Hello, {props.name}!</h1>;
}

In this example, the name variable is passed as a prop to the ChildComponent. The child component then receives the props as an argument (props), and it can access the value through props.name to display "Hello, John!" on the screen.

To change the :host CSS in a parent component with a button click in a child component, you can make use of Angular's @Input and @Output decorators.

In the parent component, create a variable that stores the CSS for the :host selector. Then, create an @Input decorator that binds this variable to the child component.

typescript
 
 
Copy code
// parent.component.ts

@Component({
  selector: 'app-parent',
  template: `
    <div class="parent-host" [ngStyle]="parentHostStyles">
      <app-child (onButtonClick)="updateParentHostStyles()"></app-child>
    </div>
  `
})
export class ParentComponent {
  parentHostStyles = { 'background-color': 'blue' };

  @Input() 
  set parentHost(css: object) {
    this.parentHostStyles = css;
  }

  updateParentHostStyles() {
    const newStyles = {'background-color': 'red'};
    this.parentHostStyles = {...this.parentHostStyles, ...newStyles};
  }
}

In the child component, create a button that emits an event with the new CSS object. Use the @Output decorator to emit this event to the parent component.

typescript
 
 
Copy code
// child.component.ts

@Component({
  selector: 'app-child',
  template: `
    <button (click)="updateHostStyles()">Change Host Styles</button>
  `
})
export class ChildComponent {
  @Output() onButtonClick = new EventEmitter<object>();

  updateHostStyles() {
    const newStyles = {'background-color': 'green'};
    this.onButtonClick.emit(newStyles);
  }
}

In the example above, the parent component listens to the onButtonClick event emitted by the child component when the button is clicked. This event contains a new CSS object, which is merged with the existing parentHostStyles using the spread operator. This updates the :host CSS for the parent component.

Note that this solution assumes that the parent and child components are in a parent-child relationship. If they are not, you may need to use a service to communicate between them.