Named imports vs. deep default imports in a third-party library using antd

[momesana]

I have stumpled upon an issue while using react-json-schema-forms in combination with their antd theme (using antd v5).

As can be seen in the original issue referred to above, the antd components don't respect the chosen theme configuration passed down via ConfigurationProvider when the component is imported as a deep default import i. e. import Input from 'antd/lib/input'; instead of the preferred named imports. Some posts like this and this suggest that one should always use named imports.

I then tried a very simple antd application created via vite (npm create vite@latest rjsf-darktheme-bug -- --template react-ts) and having antd installed as the only additional package (npm install antd) with the following content in src/App.tsx:

import { ConfigProvider, Flex, theme, Input as InputNamedImport } from "antd";
import InputDeepImport from "antd/lib/input";

export default function App() {
  return (
    <ConfigProvider
      theme={{
        algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
      }}
    >
      <Flex gap="large">
        <InputNamedImport.TextArea placeholder="normal named import" />
        <InputDeepImport.TextArea placeholder="deep default import" />
      </Flex>
    </ConfigProvider>
  );
}

The result being:

Now the question is:
Is this intentional, i. e. deep-imports should never have been employed in @rjsfs/antd and this clearly is a bug that should be addressed by them

or

are deep imports ok (albeit discouraged) and should've behaved the same as the named import in this case which implies that this issue shoudl be adressed in antd as well?

If @afc163's answer is any indication, I'd assume the former to the be case. But I'd like to clarify that before pushing the @rjsf/antd developers to include this patch.

Thanks in advance

[momesana]

Ok, the reason why this doesn't work is that the used components must have a useContext(C) or a ContextConsumer that must be identical to the one used to create the context. The only way to make the inputs receive the correct theming data from the context is to also import the Context via a deep import i.e. import ConfigProvider from "antd/lib/config-provider";`. The issue needs to be addressed in react-json-schema-forms then.