-
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. I then tried a very simple antd application created via vite ( 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>
);
} Now the question is: 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 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
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. |
Beta Was this translation helpful? Give feedback.
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.