I am trying out React-Jss from cssinjs/react.jss and this is what I've done upto now:

Installation:

npm install --save react-jss

I then tested this file where I added a Hover to the footer just to give this a test:

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

When I hover over the Footer ponent I would expect the footer to turn red but nothing is happening.

I'm I missing something or is something wrong in the syntax?

I am trying out React-Jss from cssinjs/react.jss and this is what I've done upto now:

Installation:

npm install --save react-jss

I then tested this file where I added a Hover to the footer just to give this a test:

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

When I hover over the Footer ponent I would expect the footer to turn red but nothing is happening.

I'm I missing something or is something wrong in the syntax?

• javascript
• reactjs

Share Improve this question Follow edited Apr 13, 2017 at 14:18 asked Apr 13, 2017 at 13:48 user7801216user7801216 3

• I see a number of problems here: First of all the class name footer should be Footer. Also, you are missing export default injectSheet at the end of the file. Please do what the docs say first before you ask a question: github./cssinjs/react-jss#usage – Saugat Commented Apr 13, 2017 at 14:02
• OK, the footer issue was a typo only here. I've updated the code on the question and added everything it's asking for but still no Hover happening – user7801216 Commented Apr 13, 2017 at 14:20
• Did you check the docs properly? It's using className attribute for applying the JSS to an element. It's also using props.classes Please check the docs again, just do what it says. – Saugat Commented Apr 13, 2017 at 14:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

There's a handful of reasons the code above isn't working. There's issues with your React code beyond the JSS syntax.

In regards to the JSS style declaration specifically, let's first make sure you understand what you're declaring in the style object. The properties of the style object (in your case Footer, are the class names that you want to define and as such should probably be all lowercase. The value of each of those properties is an object containing the CSS styles that you want applied by that class. If you want to define a hover styles for a given class then you would declare those styles inside of the class's style object like so:

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

I suspect you're attempting to follow the first code example under 'Usage' in the package's readme. Here's a working example that follows that approach.

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)

Below is a working example that utilizes the advantages of ES6 in case you're interested.

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