el-radio-group样式自定义

在Vue中使用Element UI的el-radio-group组件时，可以通过覆盖其默认样式来实现自定义样式。以下是一个简单的例子，展示如何自定义el-radio-group的样式：

1. 在你的Vue组件的<style>标签中，添加一个自定义类来覆盖默认样式。

<style scoped>
.custom-radio-group /deep/ .el-radio-button__inner {
  border-color: #ff0000; /* 红色边框 */
  color: #ff0000; /* 红色文字 */
}
 
.custom-radio-group /deep/ .el-radio-button__inner:hover {
  border-color: #ff0000; /* 鼠标悬浮边框颜色 */
}
 
.custom-radio-group /deep/ .el-radio-button--checked .el-radio-button__inner {
  background-color: #ff0000; /* 选中状态背景色 */
  border-color: #ff0000; /* 选中状态边框色 */
  color: #ffffff; /* 选中状态文字颜色 */
}
</style>

2. 在模板中，将自定义的类添加到el-radio-group标签上。

<template>
  <el-radio-group v-model="radio" class="custom-radio-group">
    <el-radio-button label="Option A"></el-radio-button>
    <el-radio-button label="Option B"></el-radio-button>
    <el-radio-button label="Option C"></el-radio-button>
  </el-radio-group>
</template>
 
<script>
export default {
  data() {
    return {
      radio: 'Option A'
    };
  }
};
</script>

请注意，/deep/是一个Scoped CSS特性，允许你穿透Vue组件的边界并修改子组件的样式。如果你使用的是Vue 2.5以上版本，应该使用>>>或/deep/来进行深度选择。如果是Vue 2.5以下版本，应该使用>>>。如果你使用的是Element UI 2.x版本，请确保使用正确的选择器，因为在Element UI 2.x和1.x中，样式的实现可能有所不同。