最近项目中的公共组件，在复用的时候，针对不同的场景，需要不断变更 CSS 里样式的值，而且已经有了全局的公共组件样式了
如果用 vue 传统的动态绑定 class 和 style 的方式去修改样式（文末会提到），需要额外写很多变量和模块 class，那如果我的样式的值，可以从父组件，传到子组件，子组件根据传入值去渲染对应样式的值，其实就是要再 style 中使用 data 和 props 中的变量，这要怎么做呢？
其实很简单，只需要三步，大家来看：
1、HTML 结构
<Upload
ref="upload"
:show-upload-list="false"
:before-upload="handleBeforeUpload"
:disabled="disabled"
:max-size="maxSize"
action
>2、作用区域范围内设置“CSS 变量”
<style lang="less" scoped>
.info-img-wrap {
--textAlignPosition: center;
/deep/ .ivu-upload {text-align: var(--textAlignPosition);
}
}
<style/>3、在 JS 中通过 setProperty() 方法修改“–textAlignPosition”的值，从而间接改变对应子元素的（text-align）文本对齐方式
mounted() {this.$nextTick(function () {
this.$refs.upload.$el.style.setProperty(
'--textAlignPosition',
this.textAlign
);
});
}这要就完成了。
下面再复习一下 vue 中修改样式还有另外两种方法，1 是动态修改 class，2 是动态修改 style
1、vue 中可以通过对象语法和数组语法来修改 class
对象语法
html
<div v-bind:class="{'active': isActive,'text-danger': hasError}"></div>js
data: {
isActive: false,
hasError: true
}数组语法
html
<div v-bind:class="\[isActive ? activeClass :'', errorClass\]"></div>js
data: {
isActive: false,
hasError: true,
activeClass: 'active',
errorClass: 'text-danger'
}只需要动态改变 isActive 和 hasError 的值，就可以实现 div 的绑定不同的 class 和去掉绑定
2、vue 中可以通过对象语法和数组语法来修改 style
对象语法
html
<div v-bind:style="{color: activeColor, fontSize: fontSize +'px'}"></div>js
data: {
activeColor: 'red',
fontSize: 30
}数组语法
html
<div v-bind:style="\[styleColor, styleSize\]"></div>js
data: {
styleColor: {color: 'red'},
styleSize:{fontSize:'23px'}
}只要改变 data 中的变量 styleColor 和 styleSize，就可以动态修改 div 的 style 了。