Skip to content

Instantly share code, notes, and snippets.

@Volune

Volune/InterfaceWithOverrides.js

Created September 20, 2018 09:42
Show Gist options
  • Save Volune/4e21cd7e72804c3a3b22778af6bbb8cc to your computer and use it in GitHub Desktop.
Save Volune/4e21cd7e72804c3a3b22778af6bbb8cc to your computer and use it in GitHub Desktop.
Download ZIP
Customize react-dates component style with existing global classes
Raw
initialize.js
import 'react-dates/lib/css/_datepicker.css';
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import DefaultTheme from 'react-dates/lib/theme/DefaultTheme';
import InterfaceWithOverrides from './path-to/InterfaceWithOverrides';
ThemedStyleSheet.registerInterface(InterfaceWithOverrides);
ThemedStyleSheet.registerTheme(DefaultTheme);
Raw
InterfaceWithOverrides.js
import CSSInterface from 'react-with-styles-interface-css';
const InterfaceWithOverrides = Object.create(CSSInterface);
const OVERRIDES_KEY = Symbol('overrides');
Object.assign(InterfaceWithOverrides, {
[OVERRIDES_KEY]: [],
addOverride(override) {
this[OVERRIDES_KEY].push(override);
},
resolve(...args) {
let attrs = false;
const found = this[OVERRIDES_KEY].some((override) => {
attrs = override(...args);
return Boolean(attrs);
});
if (found) {
return attrs;
}
return CSSInterface.resolve.call(this, ...args);
},
});
export default InterfaceWithOverrides;
Raw
MyComponent.js
import InterfaceWithOverrides from './path-to/InterfaceWithOverrides';
InterfaceWithOverrides.addOverride(([styles]) => {
if (styles[0] === 'DateInput_input') {
return {
className: cx('input'),
};
}
if (styles[0] === 'DateInput') {
return {};
}
return null;
});
// ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment