Element UI 更改 el-radio 的文本颜色答案

【问题标题】：Element UI Change text color of el-radioElement UI 更改 el-radio 的文本颜色
【发布时间】：2021-04-24 08:00:11
【问题描述】：

我需要将 :checked 文本颜色的默认值更改为红色 #f10606

var Main = {
    data () {
      return {
        formradio: ''
      };
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.4.3/lib/theme-chalk/index.css");
.el-radio__input.is-checked+.el-radio__label {
     color: #f10606;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
  <template>
  <el-radio-group v-model="formradio">
     <el-radio label="option1">  Option 1  </el-radio>
     <el-radio label="option2">  Option 2  </el-radio>
   </el-radio-group>
   
   
</template>
</div>

但我尝试这种风格它不起作用

<style lang="scss" scoped>
 .el-radio__input.is-checked+.el-radio__label {
     color: #f10606;
 }

我从 chrome 中检查过这种风格。

【问题讨论】：

标签： css vue.js sass vue-cli element-ui

【解决方案1】：

你可以使用!important:

.el-radio__input.is-checked + .el-radio__label {
   color: #000000 !important;
}

或使用更具体的选择器，例如将类放在组中：

<el-radio-group v-model="form-radio" class="myradiogroup">
    <el-radio label="option1">  Option 1  </el-radio>
    <el-radio label="option2">  Option 2  </el-radio>
</el-radio-group>

.myradiogroup .el-radio__input.is-checked + .el-radio__label {
  color: #000000;
}

如果问题在于范围样式，请使用深度 >>> 或 ::v-deep 选择器：

>>> .el-radio__input.is-checked + .el-radio__label {
   color: #000000;
}

【讨论】：