我在我的网站上使用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);
1 回答
如果您注册自己的 Aphrodite 界面,则需要在 root index 文件中导入这些界面
然后在您的DatePicker组件中执行以下操作:
请记住,你不应该需要
在您的代码(DatePicker)组件中,如果您正在进行自定义;)