通过传递的值来样式子组件可以通过以下几种方式实现:
// 父组件
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;
}
通过以上方式,可以通过传递的值来样式子组件,并根据传递的样式值来设置子组件的外观。
北极星训练营
云+社区技术沙龙[第7期]
云+社区开发者大会 长沙站
北极星训练营
GAME-TECH
GAME-TECH
GAME-TECH
T-Day
云+社区技术沙龙[第1期]
领取专属 10元无门槛券
手把手带您无忧上云