Recently, when developing a new requirement for a react project, I encountered Popover
the problem of adjusting the style of the bubble card component. I found that whether I set the className attribute in the tag or <Popover>
set the attribute directly in the tag style
, it didn't work.
Finally, I searched and found that overlayClassName needs to be used.
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;
}
}
This adjustment can avoid contaminating the global style and set the style of a certain bubble card individually.