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

Posted 2023-02-23

【中文标题】Element UI 更改 el-radio 的文本颜色

【英文标题】：Element UI Change text color of 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 中检查过这种风格。

【参考方案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;