Antd dark theme does not work

[mathtev]

Environment

System:

• OS: Windows 10 10.0.19045
• CPU: (12) x64 Intel(R) Core(TM) i7-9850H CPU @ 2.60GHz
• Memory: 11.48 GB / 31.79 GB

  Binaries:

• Node: 18.16.0 - ~\AppData\Local\Volta\tools\image\node\18.16.0\node.EXE
• npm: 9.6.3 - ~\AppData\Local\Volta\tools\image\npm\9.6.3\bin\npm.CMD

  npmPackages:

• styled-components: 6.1.8 => 6.1.8
• antd: 5.11.5

  Reproduction

After migrating to styled components v6 I cannot use a dark theme for antd Menu even though I am not assigning any additional styles:

  const StyledMenu = styled(Menu)``;

 // as a result I get light theme instead of dark theme
 <StyledMenu
    theme="dark"
    mode="horizontal"
    items={[
      { key: 'form', label: 'Form' },
      { key: 'settings', label: 'Settings' },
    ]}
  />

// When not using styled components dark theme is applied correctly

 <Menu
    theme="dark"
    mode="horizontal"
    items={[
      { key: 'form', label: 'Form' },
      { key: 'settings', label: 'Settings' },
    ]}
  />

Expected Behavior

Using styled-components should not have any side effects like overwriting styles that I did not specify

Actual Behavior

Some styles are overwritten by styled-components

[mathtev]

related to: https://github.com/styled-components/styled-components/issues/4182