Fix the alert in antd to show that the icon is not on the first line when there are more than two lines

Problem Description:
Problem: The icon position is centered

  1. Add a parent element div to alert and add the class name alert-wrap
      <div className="alert-wrap">
        <Alert
          message="xxxx"
          type="warning"
          showIcon={true}
        />
      </div>
  1. add style
.alert-wrap {
    
    
padding-left: 24px;
 }
.alert-wrap.ant-alert {
    
    
align-items: flex-start;
padding: 5px10px;
 }
.alert-wrap.ant-alert.ant-alert-icon {
    
    
margin-top: 4px;
 }

After modification:
Desired result

Guess you like

Origin blog.csdn.net/qq_41536505/article/details/118731119