元素 UI 更改 el-radio 的文本颜色

Question

我需要将 :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.

看过

Answer 1

您可以使用 !important:

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

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

<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;
}

元素 UI 更改 el-radio 的文本颜色

Element UI Change text color of el-radio

css

sass

vue.js

vue-cli

element-ui