I'm trying to style my react-dates
DayPickerRangeController
in Typescript, using react-with-styles and Aphrodite . I'm using this code, emulating the code from 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'
However, when I run this I get this runtime error in console:
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)
I do not get this error when:
I use the registerInterfaceWithDefaultTheme
function from the class (this doesn't allow me to style the component, though). (This surprises me because the code in registerInterfaceWithDefaultTheme
looks the same as what I have (to me at least))
const aphroditeInterface = require('react-with-styles-interface-aphrodite').default const registerInterfaceWithDefaultTheme = require('react-dates/lib/utils/registerInterfaceWithDefaultTheme') .default registerInterfaceWithDefaultTheme(aphroditeInterface)
I use import 'react-dates/initialize';
(which eventually calls registerInterfaceWithDefaultTheme
).
I still get this error when:
ThemedStyleSheet
code at the top of my src/index
file, as opposed to in the same file as the one that uses DayPickerRangeController
(This is the suggested fix in https://stackoverflow.com/a/48558841/1176156 )DayPickerRangeController
. I have confirmed in the debugger that all of my imports are getting valid code, and not eg undefined
.
This often happens if you are using multiple AirBnB components (usual suspects include react-dates & rheostat) since they all suggest this (in my opinion) slightly hacky solution to styling in their docs.
I'm sure if you do a search for ThemedStyleSheet
in your codebase you will find this is not the only place you are using it. Also watch out for various AirBnB component 'initialize' calls, which, if run after your code, will overwrite your theme and provider and cause further trouble. I said it was hacky...
You must lift all ThemedStyleSheet
related logic from across your whole codebase to the very top where it should be called just once with a combined, relevant theme before anything else is loaded. (See this github issue: https://github.com/airbnb/rheostat/issues/179 )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.