Как я могу использовать собственную тему с датами реагирования? - PullRequest
Новая
       33

Как я могу использовать собственную тему с датами реагирования?

0 голосов
/ 03 мая 2018

Я пытаюсь стилизовать мои react-dates DayPickerRangeController в Typescript, используя реагировать со стилями и Афродита . Я использую этот код, эмулируя код из 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, а затем импортировал его в мой файл Typescript, который использует DayPickerRangeController.

Я подтвердил в отладчике, что все мои операции импорта получают действительный код, а не, например, undefined.

...