最近在开发react项目的一个新需求时,遇到气泡卡片Popover
组件样式调整的问题,发现不管是在标签中设置className属性,还是在<Popover>
标签中直接设置style
属性,都不起作用。
最后搜索查阅发现要使用overlayClassName
index.js
import "./index.less"
render(){
const content={<div style={{ padding:10}}><span>气泡卡片中的文字内容</span></div>}
return (
//...
<Popover
content={text}
overlayClassName="popstyle"
>
<Icon type="question-circle">
</Popover>
)
//...
}
index.less
.popstyle{
/*在浏览器控制台调试时,需要调整哪个类名(例如:ant-popover-content)对应的样式就复制过来对应调整哪个样式*/
.ant-popover-content{
width:120px !important;
}
}
这样调整可以避免污染全局样式,单独设置某个气泡卡片的样式。