响应JSS悬停函数值

Question

我正在尝试使用一个函数值，用于使用JSS的react组件中的悬停样式(我使用的是styled jss库)。我只希望在“编辑”道具为真时应用悬停样式。目前，对于悬停部分，我有以下内容：

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

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

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

但这种语法或类似的东西似乎不受支持，我在任何地方都找不到这方面的任何例子。有什么简单的方法吗？或者，我是否只需要对悬浮对象中的每个属性进行函数值检查？

编辑：

下面是我的样式组件及其JSS的基本通用示例，以及我如何使用它们：

/* 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/>
            );
        }
    }
);

Answer 1

目前，嵌套函数规则有一个错误https://github.com/cssinjs/jss/issues/682。

Answer 2

你可以把你的函数提取到你的组件之外，然后就像-

const getHoverStyles = (edited) => edited ? { color: 'red' } : {};

const styles = {
'&:hover': {...getHoverStyles(props.edited)}
} 

PS:一个更好的选择是拥有一个css in js库，比如jss、styled-components或aphrodite，然后使用它们来声明性地定义组件的className或内联样式。

希望这能帮上忙！

更新-

我总是喜欢我的风格，而不知道道具或组件的状态。样式应该只关注主题、间距、排版等，所以我会先定义两个类，然后有条件地应用。

<Button className={props.someProp ? class1 : class2} />

一个更好的解决方案是使用道具创建更多的声明性按钮。这意味着你会有不同的道具在按钮上根据某些条件-

  <Button primary={!prop.edited} />  or {!prop.edited && <PrimaryButton/>}
  <Button secondary={prop.edited} /> or {prop.edited && <SecondaryButton/>}