如何在Radium内部包装react redux连接?

时间:2017-02-27 19:24:34

标签: javascript reactjs ecmascript-6 redux radium

通常当我在我的React应用程序中使用Radium时,我只需将导出的类包装在Radium

export default Radium(App)

和媒体查询将按预期工作。但是,我想同时使用来自react-router和Radium的连接:

//Imports
import React from 'react'
import Radium from 'radium'
import { Table, TableBody } from 'material-ui/Table'
import { connect } from 'react-redux

const tableWrapper = {
    width: '100%',
    '@media screen and (max-width: 799px)': {
        width: '50%'
    }
}

render() {
    <Table wrapperStyle={tableWrapper}>
        <TableBody>
           ...
        </TableBody>            
    </Table>
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(Object.assign({}, {update}), dispatch)
}

export default connect(null, mapDispatchToProps)(Radium(App))
export { App as AppNoRadium }

但是当我应用我的样式时,我仍然收到警告/错误:

  

警告:不支持的样式属性@media屏幕和(max-width:799px)。你的意思是@media屏幕和(maxWidth:799px)?

我是否错误地将我的组件包裹在Radium中?

1 个答案:

答案 0 :(得分:-1)

为什么最后再次导出文件。使用以下

Login = connect(mapStateToProps, { })(Radium(Login)); export default Login;

这样可以正常工作。不要忘记在上面进口镭:)