Only affect the styling of a component in which the style has been imported?

Question

I have a less file defined as follows:

//style.less
.ant-modal-close-x
{
  visibility: collapse;
}

IN a component class I use it as such:

//testclass.tsx
import './style.less';

class ReactComp{
 render(){
     return <Modal>abc</Modal>
   }
}

Now for some context: Modal is an ant.design modal dialogue, it contains a close button which uses the class name 'ant-modal-close-x' for its styling.

Because I've included 'style.less' in testclass.tsx it now affects ALL components including others which use Modal where I don't want the styling of the close button to be affected.

Is there a way to specifically override styles per component?

Answer 1

No sooner than had I posted this question after hours of trying to make this work I realised the solution:

In style.less I do the following:

.popup .ant-modal-close-x
{
  visibility: collapse;
}

Then in testclass.tsx in the render function:

render() {
   return <Modal className="popup">test</Modal>
}