SonarQube is complaining when I use [style] on html. It wants me to Use CSS classes instead. What is the proper way to use it If there is logic to deal with?

For my html:

   <a [style]= "this.isRuleCountLinkDisabled(element.folderName)">{{element.countRule}}</a> 

For my javascript:

  isRuleCountLinkDisabled(folderName: any) {       
      if (!this.isLockedFolder(folderName)) { 
        return {'pointer-events': 'none', 'color': 'inherit'};         
        }
     return;     } 

Basically it will apply the style 'pointer-events': 'none', 'color': 'inherit' if the locked folder is not what I am looking for.
What ways can I approach this without using the [style] on html?

Thank you!