<el-radio-group 样式

### 自定义 `el-radio-group` 样式

为了自定义 Element UI 中 `<el-radio-group>` 的样式，可以采用多种方式来覆盖默认样式。以下是两种常见的方式：

#### 使用深嵌套选择器 (`::v-deep`)
通过使用 Vue 的深度作用选择器 `::v-deep` 可以有效地穿透组件的作用域并应用 CSS 样式到子组件上。

<style scoped>
::v-deep .el-radio-group {
    display: flex;
}

::v-deep .el-radio-button__inner {
    height: 36px;
    margin-top: -8px;
    line-height: 20px;
}
</style>

这种方式适用于当需要调整整个按钮组内的单选按钮布局以及内部元素尺寸时[^1]。

#### 利用全局样式或 `/deep/`
对于更广泛的样式定制需求，可以直接利用全局样式文件中的 `.el-radio__input.is-checked`, 或者在 scoped 样式中借助 `/deep/` 来实现特定状态下的视觉效果更改。

<style>
/deep/ .el-radio__input.is-checked .el-radio__inner {
    border-color: #ff9213 !important;
    background-color: #ff9213 !important;
}

/deep/ .el-radio__inner:hover {
    border-color: #ff9213 !important;
}
</style>

此方法特别适合于改变已选中项的颜色以及其他交互态的效果显示[^2]。

需要注意的是，在实际项目开发过程中应谨慎使用 `!important` 关键字，除非确实必要；另外随着框架版本更新可能会引入新的最佳实践，请参照官方文档获取最新指导建议。