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

Question

Я пытаюсь стилизовать свой react-datesDayPickerRangeController в Typescript, используя реакцию со стилями и Афродиту. Я использую этот код, эмулируя код из https://github.com/airbnb/react-dates:

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 (Это предлагаемое исправление в /questions/15983746/ispolzovanie-reaktsii-so-stilem-dlya-stilizatsii-komponenta-datyi-reaktsii/15983751#15983751)
3. Я поместил точный код из https://github.com/airbnb/react-dates в Javascript, а затем импортировал его в свой файл Typescript, который использует DayPickerRangeController,

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

Answer 1

Это часто происходит, если вы используете несколько компонентов AirBnB (обычно подозреваемые включают в себя даты реакции и реостат), поскольку все они предлагают это (на мой взгляд) слегка хакерское решение для стилизации в своих документах.

Я уверен, если вы выполните поиск ThemedStyleSheetв вашей кодовой базе вы обнаружите, что это не единственное место, где вы его используете. Также обратите внимание на различные вызовы инициализации компонентов AirBnB, которые, если они запускаются после вашего кода, перезапишут вашу тему и поставщика и вызовут дополнительные проблемы. Я сказал, что это взломано...

Вы должны поднять все ThemedStyleSheetсвязанная логика от всей вашей кодовой базы до самого верха, где она должна вызываться только один раз с комбинированной соответствующей темой, прежде чем что-либо еще будет загружено. (См. Эту проблему на github: https://github.com/airbnb/rheostat/issues/179)