Search code examples
vuejs3element-plus

Element Plus: How to style the rendered components

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?

Solution

  • 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