reactjs - 如何将自定义主题与 react-dates 一起使用？

Question

我正在尝试设计我的 react-dates DayPickerRangeController在 typescript 中，使用 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)

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

我使用 registerInterfaceWithDefaultTheme类中的函数(不过，这不允许我为组件设置样式)。 (这让我很惊讶，因为 the code in registerInterfaceWithDefaultTheme 看起来和我拥有的一样(至少对我来说))

const aphroditeInterface = require('react-with-styles-interface-aphrodite').default

const registerInterfaceWithDefaultTheme = require('react-dates/lib/utils/registerInterfaceWithDefaultTheme')
.default

registerInterfaceWithDefaultTheme(aphroditeInterface)

我用 import 'react-dates/initialize'; (最终调用 registerInterfaceWithDefaultTheme )。

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

我把注册主题和界面的顺序调换了

我添加了 ThemedStyleSheet我顶部的代码 src/index文件，而不是与使用 DayPickerRangeController 的文件位于同一文件中(这是 https://stackoverflow.com/a/48558841/1176156 中的建议修复)

我输入了来自 https://github.com/airbnb/react-dates#interfaces 的确切代码在 Javascript 中，然后将其导入到我使用的 Typescript 文件中 DayPickerRangeController .

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

Answer 1

如果您使用多个 AirBnB 组件(通常的嫌疑人包括 react-dates 和变阻器)，这通常会发生，因为他们都建议(在我看来)这是在他们的文档中设计样式的略微笨拙的解决方案。
我确定你是否搜索过 ThemedStyleSheet在您的代码库中，您会发现这不是您使用它的唯一地方。还要注意各种 AirBnB 组件的“初始化”调用，如果在您的代码之后运行，这些调用将覆盖您的主题和提供程序并导致进一步的麻烦。我说它是hacky...
您必须解除所有 ThemedStyleSheet从整个代码库到最顶层的相关逻辑，在加载其他任何内容之前，应该使用组合的相关主题仅调用一次。 (请参阅此 github 问题:https://github.com/airbnb/rheostat/issues/179)