How can I add style to the body element with JSS?

Question

I'm building an application using react-jss to style my components and wanted to know if it is possible to add styles to top-level elements (like html or body).

To illustrate, I have this simple NotFound component that I'm styling with react-jss. The style works fine, but the problem is the body elements has a default margin that I wanted to remove.

NotFound.js

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

const styles = {
    notFound: {
        fontFamily: 'Roboto',
        backgroundColor: 'blue',
        color: 'white'
    }
}

function NotFound({ classes }) {
  return (
    <div className={classes.notFound}>
      NOT FOUND
    </div>
  )
}

export default injectSheet(styles)(NotFound);

Does anyone know if its possible to remove this margin using css-in-js? (I wanted to avoid css)

Answer 1

You can use the syntax introduced by jss-plugin-global

  '@global': {
    body: {...}
  }

Also recommend creating a separate component for this and wrap your component with it. Otherwise your specific component becomes less reusable.