Question

我正在尝试使用JSS的react组件中的悬停样式的函数值（我正在使用样式化的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

您可以在组件之外提取函数，然后像

那样进行结构化

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

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

PS：更好的替代方案是拥有一个css-in-js库，如jss或styled-components或aphrodite，然后使用它们以声明方式定义{{1您的组件的内联样式。

希望这有帮助！

更新 -

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

className

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

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

Answer 2

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

React JSS悬停函数值

2 个答案: