如何将自定义主题与反应日期一起使用?

Question

我正在尝试在 Typescript 中设置我的react-datesDayPickerRangeController样式，使用 react-with-styles 和 Aphrodite。我正在使用此代码，模拟 https://github.com/airbnb/react-dates#interfaces 中的代码：

const ThemedStyleSheet = require('react-with-styles/lib/ThemedStyleSheet').default
const aphroditeInterface = require('react-with-styles-interface-aphrodite').default
const DefaultTheme = require('react-dates/lib/theme/DefaultTheme').default
ThemedStyleSheet.registerInterface(aphroditeInterface)
ThemedStyleSheet.registerTheme(DefaultTheme)
// Importing react-dates after registering the theme, as per the docs.
import * as ReactDates from 'react-dates'

但是，当我运行它时，我在控制台中收到此运行时错误：

Cannot read property 'createLTR' of undefined
TypeError: Cannot read property 'createLTR' of undefined
at Object.createLTR (http://localhost:6006/static/preview.bundle.js:133281:47)
at createStyles (http://localhost:6006/static/preview.bundle.js:9710:59)
at WithStyles.maybeCreateStyles (http://localhost:6006/static/preview.bundle.js:9805:22)
at WithStyles.componentWillMount (http://localhost:6006/static/preview.bundle.js:9739:20)
at callComponentWillMount (http://localhost:6006/static/preview.bundle.js:42214:16)
at mountClassInstance (http://localhost:6006/static/preview.bundle.js:42310:7)
at updateClassComponent (http://localhost:6006/static/preview.bundle.js:43679:9)
at beginWork (http://localhost:6006/static/preview.bundle.js:44320:16)
at performUnitOfWork (http://localhost:6006/static/preview.bundle.js:47152:16)
at workLoop (http://localhost:6006/static/preview.bundle.js:47181:26)

在以下情况下，我不会收到此错误：

1. 我使用类中的registerInterfaceWithDefaultTheme函数(不过，这不允许我设置组件的样式(。(这让我感到惊讶，因为registerInterfaceWithDefaultTheme中的代码看起来与我拥有的代码相同(至少对我来说((

   const aphroditeInterface = require('react-with-styles-interface-aphrodite').default
   const registerInterfaceWithDefaultTheme = require('react-dates/lib/utils/registerInterfaceWithDefaultTheme')
   .default
   registerInterfaceWithDefaultTheme(aphroditeInterface)
   

2. 我使用import 'react-dates/initialize';(最终称为registerInterfaceWithDefaultTheme(。

在以下情况下，我仍然收到此错误：

1. 我交换注册主题和界面的顺序
2. 我将ThemedStyleSheet代码添加到src/index文件的顶部，而不是与使用DayPickerRangeController的文件相同的文件(这是 https://stackoverflow.com/a/48558841/1176156 中建议的修复程序(
3. 我将 https://github.com/airbnb/react-dates#interfaces 中的确切代码放入Javascript中，然后将其导入到使用DayPickerRangeController的Typescript文件中。

我已经在调试器中确认我的所有导入都获得了有效的代码，而不是例如undefined.

Answer 1

如果您使用多个AirBnB组件(通常的嫌疑人包括反应日期和变阻器(，通常会发生这种情况，因为它们都建议(在我看来(在他们的文档中使用这种略微黑客的解决方案。

我敢肯定，如果您在代码库中搜索ThemedStyleSheet，您会发现这不是您使用它的唯一地方。还要注意各种 AirBnB 组件"初始化"调用，如果在代码之后运行，这些调用将覆盖您的主题和提供程序并造成进一步的麻烦。我说这很笨拙...

您必须将所有与ThemedStyleSheet相关的逻辑从整个代码库提升到最顶层，在加载任何其他内容之前，应该只使用组合的相关主题调用一次。(请参阅此 github 问题：https://github.com/airbnb/rheostat/issues/179(