Radium hover didn't work

Question

I'm using Radium to write inline css in React and i have the following error when i want to use "hover":

Uncaught TypeError: Cannot read property '_currentElement' of null

Did i do something wrong ?

import React from 'react';
import Radium from 'radium';

class Header extends React.Component {
    render() {
        var styles = {
            base: {
                backgroundColor: 'white',
                ':hover': {
                    backgroundColor: 'black'
                }
            },
            anchor: {
                color: 'black',
                ':hover': {
                    color: 'white',
                }
            }
        }

        return (
            <div>
                <div style={styles.base}>
                    <a style={styles.anchor}>Some text</a>
                </div>
            </div>
        );
    }
}

Header = Radium(Header);
export default Header;

In fact, if i didn't use styles.anchor , it worked. So i don't understand why it doesn't work with styles.anchor .

Another problem, when i try to add the prefix @Radium before the class Header extends React.Component , i got a compilation's error.

Thank you !

Answer 1

如果您正在使用babel，则必须安装plugin-transform-decorators-legacy才能使@Radium正常工作，但目前已弃用该功能，我怀疑它很快就会回来，因此我会坚持使用export default Radium(Header)组件包装export default Radium(Header)