美文网首页
2019-12-19--自定义样式以覆盖ui库的默认样式

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

作者: 安乐_f487 | 来源:发表于2019-12-20 11:02 被阅读0次

    开发过程中,遇到 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>
    

    相关文章

      网友评论

          本文标题:2019-12-19--自定义样式以覆盖ui库的默认样式

          本文链接:https://www.haomeiwen.com/subject/wfimnctx.html