4

我在我的站点中使用了一个 react-dates 日期选择器，最近更新到版本 16（从 13 之前的版本）。由于新版本与以前的版本有很大不同的标记，我的自定义样式表是无关紧要的，而不是再次自定义样式表，我更喜欢使用 react-with-styles 自定义选项。问题是，我似乎无法弄清楚它是如何工作的，并且文档有点不清楚。

我现在拥有的基本上是这样的：

// 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 文件。而不是这个，我想使用 react-with-styles 来避免必须导入 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);
4

1 回答 1

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）组件中；）

于 2018-02-01T09:02:45.850 回答