Vue Element UI 之默認樣式修改不成功的問題

一、問題描述

想要在某個 el-form-item 中添加一個 color 屬性，在瀏覽器調試沒有問題，然後就把代碼複製粘貼到項目中，但是問題出現了，竟然沒有添加上去，what？why？

這是在測試的時候確定的位置，紅框內是測試時添加的樣式（這是它該有的樣子，然而，當我在項目中寫好代碼，刷新之後再次來到這裏，發現空空如也，紅框代碼它不在）

這是在項目中修改的代碼：

<style scoped>
	.el-form-item__content{
		color: red;
	}
</style>

二、原因

搜索了一下，大家都將矛頭指向一個單詞：scoped（單詞好無辜的樣子，哈哈）

三、解決方法

方法有三：

1、方法一
簡單粗暴，去掉 scoped（當然，這樣的話就會出現樣式全局使用的缺陷）

<style>
	.el-form-item__content{
		color: red;
	}
</style>

2、方法二
在要修改的class的父級添加一個class名，並通過明確路徑修改樣式

<style scoped>
	.routerLink .el-form-item__content{
		color: red;
	}
</style>

3、方法三
無疑，前兩種方法應該是能成功的，然而，我這裏卻沒有，所以更簡單粗暴一點，我直接在父級上添加樣式了

<style scoped>
	.routerLink{
		color: red;
	}
</style>

完成~~