0

I am trying to style element plus' el-radio-button in a el-radio-group to have different colours. It is not available by the el-radio-button properties, so I'm trying to target the rendered html elements. When I inspect my webpage, something like the following is shown:

<label class="el-radio-button" role="radio" aria-checked="false" aria-disabled="false" tabindex="-1" data-v-bf51d4b2="" style="color: red;">
  <input class="el-radio-button__original-radio" type="radio" name="" tabindex="-1" value="Karthus">
  <span class="el-radio-button__inner">Karthus</span>
</label>

The styles are applied on label.el-radio-button and span.el-radio-button__inner but I can't seem to target them using the following styles in my sfc:

<style lang="scss" scoped>
.el-radio-button {
  color: red;
  padding: 20em;

  .el-radio-button__inner {
    color: blue;

    &:hover {
      color: red;
    }
  }
}
</style>

None of these are applying. I can't really tell whether it's because of specificity, or just overrides, etc. !important on the color properties also don't seem to apply. Is there a way to properly target the rendered html elements in the sfc style?

cSharp
  • 2,884
  • 1
  • 6
  • 23

1 Answers1

1

Use more specific css selectors and it should work

<style>
  .el-radio-group .el-radio-button {
    color: red;
    padding: 20em;
  }
  
  .el-radio-group .el-radio-button__inner {
    color: blue;
  }
  
  .el-radio-group .el-radio-button__inner:hover {
      color: red;
  }  
</style>

example

Apostolos
  • 10,033
  • 5
  • 24
  • 39
  • I ended up creating my own component, but I have looked a bit further into this. You are right that there needs to be more specificity, but also it seems that having styles `scoped` or not also affects whether the styles are applied to the rendered components, which seems obvious on hindsight. Just the original code and removing `scoped` from ` – cSharp Jun 21 '22 at 01:22