仅影响已导入样式的组件的样式？

Question

我有一个较小的文件，定义如下：

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

在组件类中，我按如下方式使用它：

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

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

现在在某些情况下：Modal是一种ant.design模式对话，它包含一个关闭按钮，该按钮使用类名“ ant-modal-close-x”作为样式。

因为我在testclass.tsx中包含了“ style.less”，所以它现在会影响所有组件，包括使用Modal的其他组件，而我不希望关闭按钮的样式受到影响。

有没有一种方法可以专门覆盖每个组件的样式？

Answer 1

经过数小时的尝试后，我才发布这个问题，我才意识到解决方案：

在style.less中，我将执行以下操作：

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

然后在render函数中的testclass.tsx中：

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