【ElementUI】组件样式修改不生效

引用Element组件并修改css后，样式不生效

vue文件内引用elementUI卡片：

<el-card class="box-card-fancy">
	<div slot="header" class="clearfix">
		<span>卡片名称</span>
		<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
	</div>
	<div v-for="o in 4" :key="o" class="text item-fancy">
    	{{'列表内容 ' + o }}
	</div>
</el-card>

卡片的css代码：

.box-card-fancy {
    text-align: left;
    line-height: 35px;
    float: left;
    width: 30%;
    max-height: 48%;
    min-height: 48%;
    margin-right: 10px;
    overflow-y: auto;
}

在css的代码内，加了overflow-y: auto的属性，修改后，调试页面发现没生效；

问题排查

F12检查，发现原因在于ElementUI组件本身设置了.el-card的overflow-y为hiddent，所以，即使我引入的el-card卡片的class内加上了overflow-y: auto的属性，也无法生效

解决办法

直接在el-card加上行内样式**style="overflow-y: auto"**，可以生效

<el-card class="box-card-fancy" style="overflow-y: auto">
	<div slot="header" class="clearfix">
		<span>卡片名称</span>
        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
    </div>
    <div v-for="o in 4" :key="o" class="text item-fancy">
    	{{'列表内容 ' + o }}
    </div>
</el-card>

效果如下图：