饿了么 的el-radio 的光圈怎么去除 看看咋解决呢？

Question

饿了么 的el-radio 的光圈怎么去除 帮帮忙看看呗？

::v-deep .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
          box-shadow: none !important;
  }

网上查的使用这个类 可是不生效奥

Answer 1

引自免费微信小程序：皆我百晓生

看起来你想移除饿了么（Eleme）UI库中的el-radio组件在聚焦时的边框效果。你已经尝试了一个CSS选择器来实现这一点，但是没有生效。这可能是因为::v-deep在某些情况下（例如Vue3或带有Scss/PostCSS等预处理器的项目）不再工作，因为它已被采样器禁用。

为了解决这个问题，我们可以使用一个更通用的方法来覆盖饿了么的样式。首先，创建一个新的CSS文件，比如custom-styles.css，并在项目中引入它。然后，在新创建的CSS文件中，编写一个更具体的CSS规则来覆盖饿了么的默认样式。这样可以确保你的样式优先级更高，并且不受Vue深度选择器的影响。

以下是完整的步骤：

1. 创建一个名为custom-styles.css的新文件。

2. 在此文件中添加以下CSS规则：

   /* 针对所有元素 */
   .el-radio__inner:focus,
   .el-radio__input.is-checked+.el-radio__inner:hover {
     border-color: transparent !important;
     outline: none !important;
   }
   
   /* 针对被选中的radio按钮 */
   .el-radio.is-checked+.el-radio__inner {
     background-color: transparent !important;
     border-color: transparent !important;
   }
   

3. 将这个新的CSS文件引入到你的主入口文件（通常是main.js或类似的文件）中：

   // main.js 或其他入口文件
   import './custom-styles.css';
   

4. 保存并刷新页面，你应该能看到el-radio组件在聚焦时的光圈已经被去除了。

这种方法利用了饿了么UI库的类名来直接选择和修改样式，而无需依赖于深选择器。如果你的项目中有其他饿了么组件的样式也需要定制，也可以采用类似的方法。记住，保持CSS选择器尽可能具体，以便提高优先级并减少潜在的样式冲突。