javascript - JavaScript react-jss悬停颜色不变

我正在从cssinjs.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);

当我将鼠标悬停在页脚组件上时，我希望页脚变为红色，但没有任何反应。

我缺少某些语法或语法有问题吗？

最佳答案

上面的代码无法正常工作的原因有很多。除了JSS语法，您的React代码还有问题。

关于JSS样式声明，首先确保您了解在样式对象中声明的内容。样式对象的属性（在您的情况下为Footer，是您要定义的类名，因此应该全部使用小写字母。每个属性的值都是一个包含要应用的CSS样式的对象。如果要为给定类定义悬停样式，则可以在类的样式对象中声明这些样式，如下所示：

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

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

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

关于javascript - JavaScript react-jss悬停颜色不变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43394062/