使用用样式的react样式来设计react组件。
使用用样式的react样式来设计react组件。
提问于 2018-01-23 17:24:01
我在我的网站上使用了一个反应日期选择器，并且最近更新到了版本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文件。相反，我想使用react with-样式来避免导入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
Stack Overflow用户
发布于 2018-02-01 09:02:45
如果您注册了自己的接口，则需要将它们导入根索引文件中。
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)组件中，如果您正在进行您自己的定制;)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48407492
复制相关文章
相似问题
腾讯云开发者
