2019-12-19--自定义样式以覆盖ui库的默认样式

开发过程中,遇到 antD 的menu中的样式在root下再去设置无效,原因是实际渲染后,menu 的内容被加载了文档的最后(<script>外),导致样式无效

解决方法:
借助 styled-components 库,自定义一个节点来包裹 antd 的组件,在该自定义节点下去设置样式,就可以生效

例如:

import styled from 'styled-components';

const BadgeWrapper = styled.div`
.ant-badge-dot{
  width: 8px;
  height: 8px;
  box-shadow: 0 0;
}
`;

<Menu.Item>
<BadgeWrapper>
     <Badge count={0} dot>
         example
     </Badge>
 </BadgeWrapper>
</Menu.Item>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容