React JSS 悬停函数值答案

【问题标题】：React JSS hover function valueReact JSS 悬停函数值
【发布时间】：2018-09-15 10:19:05
【问题描述】：

我正在尝试在带有 JSS 的反应组件中为悬停样式使用函数值（我正在使用 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'
        }
    })
};

然后在我的 react 组件中：

import { Style } from './style';

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

【问题讨论】：

标签： css reactjs function styled-components jss

【解决方案1】：

你可以在你的组件之外提取你的函数，然后像解构一样 -

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

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

PS: 一个更好的选择是拥有一个像 jss 或 styled-components 或 aphrodite 这样的 css-in-js 库，然后使用它们为您的组件声明式定义 className 或内联样式.

希望这会有所帮助！ ?

更新 -

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

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

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

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

【讨论】：

我实际上在使用 styled-JSS：github.com/cssinjs/styled-jss，它是 styled components + JSS。我在我的帖子中添加了一个编辑，以展示我是如何实际实现它的，因为我不确定如何在我的组件上下文中使用您的响应。

【解决方案2】：

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

【讨论】：