React JSS hover函数值

我试图在带有JSS的react组件中为悬停样式使用一个函数值(我使用的是样式化的JSS库)。我只想在“编辑”道具为true时应用悬停样式。目前对于悬停部分,我有以下内容:

'&:hover': {
    background: props => props.edited && 'purple',
    cursor: props => props.edited && 'pointer',
    ...
}

这很好,但正如您所见,我必须对每个悬停CSS值进行函数值检查。我只想在开始时检查一次,如果是真的,则返回对象:

'&:hover': props => props.edited && {
    background: 'purple',
    cursor: 'pointer',
    ...
}

但这种语法或类似的东西似乎不受支持,我在任何地方都找不到任何这样的例子。有没有简单的方法可以做到这一点?还是只需对悬停对象中的每个属性执行函数值检查?

编辑:

下面是我的样式化组件及其JS的基本通用示例,以及我如何使用它们:

/* style.js */
import styled from 'styled-jss';
const div = styled('div');

export const Style = {
    UpdateButton: div({
        color: props => !props.edited && 'grey',
        width: '200px',
        '&:hover': {
            background: props => props.edited && 'purple',
            cursor: props => props.edited && 'pointer'
        }
    })
};

然后在我的反应组件中:

import { Style } from './style';

class Settings extends Component {
        render() {
            return(
                <Style.UpdateButton/>
            );
        }
    }
);