Javascript react-jss悬停不更改颜色

Question

我正在尝试来自cssinss.org/react.jss的React-Jss，这就是我到目前为止所做的：

安装：

npm install --save react-jss

然后我测试了这个文件，我在页脚添加了一个Hover，只是为了测试一下：

import React from 'react';
import injectSheet from 'react-jss';

const style = {
  Footer: {
    backgroundColor: '#000000',
  },
  '&:hover': {
      backgroundColor: '#ff0000',
    }
};

export class Footer extends React.Component {

  render() {
    return (
      <Footer>This is the footer</Footer>

    );
  }
}

export default injectSheet(style);

当我将鼠标悬停在页脚组件上时，我希望页脚变成红色，但什么也没有发生。

我是不是漏掉了什么，还是语法有问题？

Answer 1

上面的代码不能工作的原因有很多。除了JSS语法之外，您的React代码还存在问题。

特别是关于JSS样式声明，首先让我们确保您理解在样式对象中声明的内容。style对象的属性(在本例中为Footer )是您希望定义的类名，因此可能都应该是小写的。这些属性中的每个属性的值都是一个对象，其中包含要由该类应用的CSS样式。如果你想为一个给定的类定义一个悬停样式，那么你可以在这个类的样式对象中声明这些样式，如下所示：

const style = {
  footer: {
    backgroundColor: '#000000',
    '&:hover': {
      backgroundColor: '#ff0000',
    }
  }
};

我怀疑您正在尝试遵循package's readme中“Usage”下的第一个代码示例。下面是一个遵循这种方法的工作示例。

import React from 'react'
import injectSheet from 'react-jss'

const style = {
  footer: {
    backgroundColor: '#000000',
    '&:hover': {
      backgroundColor: '#ff0000'
    }
  }
}

const Footer = ({sheet}) => (
  <div className={sheet.classes.footer}>This is the footer</div>
)

export default injectSheet(style)(Footer)

下面是一个工作示例，它利用了ES6的优势，如果您感兴趣的话。

import React, {PropTypes} from 'react';
import injectSheet from 'react-jss';

const style = {
  footer: {
    backgroundColor: '#000000',
    '&:hover': {
      backgroundColor: '#ff0000'
    }
  }
};

@injectSheet(style)
export default class Footer extends React.Component {
  static propTypes = {
    sheet: PropTypes.object.isRequired
  }

  render() {
    const {sheet} = this.props
    return (
      <div className={sheet.classes.footer}>This is the footer</div>
    );
  }
}