解决el-radio全局样式修改不生效

1.一点废话前提

由于实际开发中可能会遇到需要修改elementui组件内部样式的情况，所以常用作法是在<style>标签中修改属性，如果想只作用于当前页面，只需要加上scope属性即可<style scoped>。

但常常也会遇到需要将样式抽离出来整合成单独的样式文件进行全局注册作用到所有页面，这种情况只需要将common.css在main.js中注册一下就行，就像这样:

import "./common.css";

2.实际问题

之前在修改全局样式的时候，诸如el-input,.el-dialog等组件，直接修改或者通过:deep穿透都可以。

//范例
:deep(.el-input) {
  line-height: 32px;
}
.el-radio-group {
  .el-radio-button__inner {
    font-size: 12px;
  }

但不知道为什么遇上el-radio失效了，始终作用不到其他文件上。

:deep(.el-radio .el-radio__label) { 
    font-size: 12px ;
}

注：这里修改单个文件或者全局修改后通过@import引入样式文件也是可以生效的，不过这不符合我的要求，代码也会看起来有冗余的地方。

3.解决方法

先贴改法

.el-radio {
  & .el-radio__label {
    font-size: 12px;
  }
}

再讲讲为什么这样改

在 Vue 组件中，组件样式默认具有作用域限制。这是通过给每个组件的根元素添加一个唯一的属性选择器来实现的。这个属性选择器的命名类似于data-v-xxxxxxx。这样做是为了确保组件样式只应用于当前组件的根元素及其后代元素。

按理说:deep() 会选择 Vue 组件内部的元素并进行样式设置。正常情况下，这些代码应该能够实现全局样式生效。但没有生效的原因只会有两个：样式覆盖 和 CSS优先级

为了解决这个问题，换成使用 Less 的&符号来表示当前选择器的父级元素。在这种写法中，我们将.el-radio类作为父级元素的类名前缀，这样就实现了相同的效果。

通过这样的写法，我们在全局样式文件中定义的样式将会匹配所有具有 .el-radio 类的元素，无论它们位于哪个组件内部。这样就实现了全局的生效。

总结起来，使用.el-radio类作为父级元素的类名前缀，可以确保样式应用于所有具有该类名的元素，而不受组件作用域限制的影响。