前端开发中一些常用的UI技巧

刚入门前端，接手某个项目，开发了一些新需求，在开发过程中，多次遇到了某些UI上的问题，通过搜寻资料找到了解决方案，记录在此，方便后续查看。

该文章会比较小白，项目基于react。

antd样式更改

Anti Design 是一个很好用的 UI 组件库，如果想快速实现一些 UI 组件，可以直接引用其中的组件，但是当视觉设计与 antd 原生样式不一致时，通过赋值修改组件的 style 往往是不能生效的，网上有通过修改 webpack 配置的方式来使其生效，我没有做尝试（略微麻烦），而是在 css 样式中进行更改。

以全局消息组件 Message 为例，简单写法如下：

  showMessage(text){
    message.open({
      content: text,
      duration: 0, //全局消息停留时间，这里为了方便调试，设置为0，则不自动消失
    });
  }

  render(){
    return(
      <div>
        <div onClick={()=>{this.showMessage('message')}}>提示弹窗</div>
      </div>
    )
  }

可以看到 UI 是这样的：

我们现在想要一个红框白底的组件，根据官网的描述，赋值className，在 css 文件中设置样式。

.error-message{
  border: 1px solid #f53f3f66;
  background: #fef0f0;
}

  showMessage(text){
    message.open({
      content: text,
      duration: 0,
      className: 'error-message'
    });
  }

更新 UI 如下：

可以看到，样式的设置并没有生效到预期的位置。 查看网页源代码，可以看到，该组件由几个 div 包裹，我们设置的类名在比较外层，与 ant-message-notice 同级，而我们实际想更改的是内层的 ant-message-notice-content。

更改 css 文件，在自定义 className 中嵌套 antd 定义的 className。

.error-message .ant-message-notice-content {
  border: 1px solid #f53f3f66;
  background: #fef0f0;
}

转到运行网页，看到 UI 如同预期

成功改造了 antd 的 UI 🎉🎉🎉

依葫芦画瓢，对 UI 修改亿点点细节，最终效果如下：

修改如下：

showMessage(text){
    message.open({
      content: text,
      duration: 0,
      className: 'error-message',
      icon: <img src={ErrorIcon} 
      style={{width: '16px', height: '16px', padding: '0 6px 0 0'}}/>
    });
  }

.error-message .ant-message-notice-content {
  border: 1px solid #f53f3f66;
  background: #fef0f0;
  border-radius: 4px;
  box-shadow: 0 0 12px 0 rgba(245, 63, 63, 0.08);
}
.error-message .ant-message-notice-content .ant-message-custom-content {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f53f3f;
}