styled-components don't work with Tab.js

It's not possible to customize Tab.js with styled-components (https://github.com/styled-components/styled-components) because of this line in Tab.js:

if (child.type !== _Tab2.default) {
  return child;
}

if you customize the styling with styled-components,

const StyleTab = styled(Tab)`
    background-color : ${props => props.selected? 'white' : 'transparent'};
`;

child.type will no longer be Tab but StyleTab

I also don't understand why this check is here?

レポートで説明されている child.type のチェック箇所から Tab.js の調査を始め、その後 styled-components の例を再現して、カスタマイズされたタブがどのように処理されるかを理解してください。styled Tab コンポーネントを拒否されることなくカスタマイズでき、既存のタブの動作が維持されれば完了です。