Reactjs 使用“与样式一起反应”设置反应日期组件的样式

Reactjs 使用“与样式一起反应”设置反应日期组件的样式,reactjs,react-dates,Reactjs,React Dates,我在我的网站上使用了一个日期选择器,最近更新到版本16(从13之前的版本)。由于新版本的标记与以前的版本有很大的不同,因此我的自定义样式表与此无关,我宁愿使用自定义的react with styles选项,而不是再次自定义样式表。问题是,我似乎不知道它是如何工作的,文档也有点不清楚 我现在基本上是这样的: // Css file imported elsewhere import 'react-dates/initialize'; import { SingleDatePicker } from

我在我的网站上使用了一个日期选择器,最近更新到版本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文件
导入“反应日期/初始化”;
从“反应日期”导入{SingleDatePicker};
导出默认类MyComponent扩展组件{
render(){
返回
}
}
这是可行的,但需要我自定义css文件。与此相反,我希望使用react with styles来避免导入css文件,但我似乎无法实现这一点。我已经看过了,但似乎不太懂

这就是我到目前为止所做的:

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);
从'react with styles/lib/ThemedStyleSheet'导入主题样式表;
从'react with styles interface aphrodite'导入aphrodite接口;
从“react dates/lib/theme/DefaultTheme”导入DefaultTheme;
从“反应日期”导入{SingleDatePicker};
从'react with styles'导入{withStyles};
//不知道这是干什么用的。全局设置DefaultTheme+aphroditeInterface?
主题样式表。注册主题(DefaultTheme);
registerInterface(aphroditeInterface);
类MyComponent扩展组件{
render(){
返回
}
}
使用样式导出默认值(()=>({
//不知道这部分做什么
}))(MyComponent);

如果您注册自己的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
在代码(DatePicker)组件中,如果您正在进行自定义;)

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