如何通过传递的值来样式子组件？

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const style = {
    color: 'red',
    fontSize: '16px',
  };

  return <ChildComponent style={style} />;
};

// 子组件
import React from 'react';

const ChildComponent = ({ style }) => {
  return <div style={style}>子组件内容</div>;
};

export default ChildComponent;

<!-- 父组件 -->
<template>
  <div>
    <child-component class-name="red-text" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
};
</script>

<!-- 子组件 -->
<template>
  <div :class="className">子组件内容</div>
</template>

<script>
export default {
  props: ['className'],
};
</script>

<style scoped>
.red-text {
  color: red;
  font-size: 16px;
}
</style>

// 父组件
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent-component',
  template: `
    <app-child-component [styleObj]="style"></app-child-component>
  `,
})
export class ParentComponent {
  style = {
    color: 'red',
    'font-size': '16px',
  };
}

// 子组件
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child-component',
  template: `
    <div [ngStyle]="styleObj">子组件内容</div>
  `,
})
export class ChildComponent {
  @Input() styleObj: any;
}