CODEWITHSUNDEEP
htmlcss
user1088793
user1088793

Reputation: 653

How to override an elements style that is deeply nested by other classes/elements?

The problem is that I am not able to override a CSS property on an element defined by class "ant-input-clear-icon". I have no access to it directly as it is imported from a library. However, I assumed I could wrap the nested elements in div and then use CSS specificity to select it/override. Can anyone help?

I am using LESS loader/CSS modules. Here is the markup (rendered by react):

<div class="ant_input_clear_icon_Wrapper8JxTE">
 <span class="ant-input-affix-wrapper ant-input-affix-wrapper-lg">
  <span class="ant-input-suffix">
    <i aria-label="icon: close-circle" role="button" tabindex="-1" class="anticon anticon-close-circle 
      ant-input-clear-icon"></i>
  </span>
 </span>
</div>

Here is my CSS within a less module:

/*Make clear button larger */
.ant_input_clear_icon_Wrapper8JxTE {
  .ant-input-clear-icon {
    font-size: 19px;
  }
}

Note, that this works: 

.ant_input_clear_icon_Wrapper {
  i {
    font-size: 19px !important;
  }
}

But seems like there should be a better way

Upvotes: 0

Views: 501

Answers (1)

Par Tha
Par Tha

Reputation: 1531

Try to put !important

.ant_input_clear_icon_Wrapper8JxTE {
  .ant-input-clear-icon {
    font-size: 19px!important;
  }
}

Upvotes: 1

Related Questions