javascript - 只影响导入样式的组件的样式?

标签 javascript css reactjs less

我有一个less文件定义如下:

//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 的组件,而我不希望关闭按钮的样式受到影响。

有没有办法专门覆盖每个组件的样式?

最佳答案

经过几个小时的尝试,我才发布了这个问题,我意识到了解决方案:

在 style.less 中,我执行以下操作:

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

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

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

关于javascript - 只影响导入样式的组件的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51257966/

相关文章:

javascript - console.log 卡住 javascript 控制台

javascript - 每个表格单元格仅允许一个查询结果

html - 图像预览框

javascript - JSX 动态组件 - 未知属性

javascript - 目标容器不是 ReactJS 中的 DOM 元素

javascript - Oracle APEX - 如何在打印时缩放区域以适合单页

javascript - Websocket 对象上的 InvalidStateError

html - html 元素旁边奇怪的黄色 (!) 行

javascript - 使用 cookie 代替字符串 - javascript

javascript - react dropzone 与 react 图像文件调整器不起作用