Использование реакции со стилем для стилизации компонента даты реакции

Question

Я использую средство выбора даты реакции на моем сайте и недавно обновлено до версии 16 (с версии до 13). Поскольку новая версия имеет разную разметку по сравнению с предыдущими версиями, мои пользовательские таблицы стилей не имеют значения, и вместо того, чтобы снова настраивать таблицы стилей, я бы предпочел использовать параметр настройки реагировать со стилями. Проблема в том, что я не могу понять, как это работает, и документация немного неясна.

То, что я имею сейчас, в основном это:

// Css file imported elsewhere
import 'react-dates/initialize';
import { SingleDatePicker } from 'react-dates';

export default class MyComponent extends Component {

    render() {

        return <div className="myWrapper">
            <SingleDatePicker
                ...
            />
        </div>
    }
}

Это работает, но требует от меня, чтобы настроить файл CSS. Вместо этого я хотел бы использовать реакцию с стилями, чтобы избежать необходимости импортировать css-файл, но я не могу заставить это работать. Я посмотрел на https://github.com/airbnb/react-with-styles но просто не могу понять, как это работает.

Это то, что я до сих пор:

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import DefaultTheme from 'react-dates/lib/theme/DefaultTheme';
import {SingleDatePicker} from 'react-dates';
import { withStyles } from 'react-with-styles';

// Not sure what this does. Sets DefaultTheme + aphroditeInterface globally?
ThemedStyleSheet.registerTheme(DefaultTheme);
ThemedStyleSheet.registerInterface(aphroditeInterface);

class MyComponent extends Component {

    render() {

        return <div className="myWrapper">
            <SingleDatePicker
                ...
            />
        </div>
    }
}


export default withStyles(() => ({
    // Not sure what this part does
}))(MyComponent);

Answer 1

Если вы регистрируете свой собственный интерфейс Aphrodite, вам необходимо импортировать их в свой корневой индексный файл

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import DefaultTheme from 'react-dates/lib/theme/DefaultTheme';


ThemedStyleSheet.registerTheme(DefaultTheme);
ThemedStyleSheet.registerInterface(aphroditeInterface);

Затем в вашем компоненте DatePicker сделайте это:

Import React, {Component} from 'react'
import {SingleDatePicker} from 'react-dates';

class MyComponent extends Component {

    render() {

        return <div className="myWrapper">
            <SingleDatePicker
                ...
            />
        </div>
    }
}


export default MyComponent

Имейте в виду, вам не нужно

import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';

в вашем компоненте кода (DatePicker), если вы делаете свою собственную настройку;)