How do I wrap react redux connect inside Radium?

Question

Typically when I use Radium in my React app, I would simply wrap my exported class inside Radium

export default Radium(App)

and media queries would work as expected. However, I want to use both connect from react-router alongside Radium like this:

//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 }

but I continue to receive the warning/error when I apply my styles:

Warning: Unsupported style property @media screen and (max-width: 799px). Did you mean @media screen and (maxWidth: 799px)?

Am I incorrectly wrapping my component inside Radium?

Irregardless of where my styles is, this has worked in my other files where I've only used Radium without Redux. The question states how I should wrap with Radium. — patrickhuang94, Feb 27 '17 at 19:34
your warning is an answer, //Rendered stuff is important part — hawk, Feb 27 '17 at 19:43
As a side note: you can simplify the `mapDispatch` implementation because you don't need to copy the actions object. And, you don't even _need_ `mapDispatch` as written, because `connect` supports a shorthand - you can just do `connect(null, {update})(MyComponent)`. — markerikson, Feb 27 '17 at 20:04
@markerikson thanks for the side note haha. I would still like my problem to be resolved :p — patrickhuang94, Feb 27 '17 at 20:05

score -1 · Answer 1 · edited May 31 '17 at 12:42

-1

Why are you exporting file again in the end . Use following

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

This will work fine. Don't forget to import radium on top :)

edited May 31 '17 at 12:42

HDJEMAI

9,436
46
67
93

answered May 31 '17 at 12:20

Adeel Abbas

1

How do I wrap react redux connect inside Radium?

1 Answers1