样式化的组件-防止数据测试传播到元素？

Question

我有一个样式化的组件，我将其设置为data-test属性。当组件渲染时，data-test属性也会出现在子元素上。我如何防止它传播到子元素？

const HeaderButton = styled(Button)`
    padding: ${remAuto(1)};
`;

const foo = () => <HeaderButton data-test="header-button" />;

结果来源：

<HeaderButton data-test="header-button">                                                                                    
  <Button className="pane-header__HeaderButton-sc-1m834wj-6 iYyjTf" data-test="header-button">                                                                                      
    <button__StyledButton className="pane-header__HeaderButton-sc-1m834wj-6 iYyjTf" data-test="header-button">                                                                                        
      <button__BaseButton className="pane-header__HeaderButton-sc-1m834wj-6 iYyjTf button__StyledButton-i7xkwa-1 data-test="header-button">                                                                                          
        <button className="pane-header__HeaderButton-sc-1m834wj-6 iYyjTf button__StyledButton-i7xkwa-1 jxgniU button__BaseButton-i7xkwa-0 jfiieO" data-test="header-button" />
        </button>
      </button__BaseButton>
    </button__StyledButton>
  </Button>
</HeaderButton>