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