Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use '@global' with React-JSS

Tags:

reactjs

jss

I'm using React-JSS and not understanding how to use '@global' to create global styles. The doc doesn't indicate (as far as I can tell) how the global style gets feed/hooked into the React app. I created a sample app where I try feeding the global styles to the 'style' attribute of the top level component but that does not work.

codesandbox example

Here is App.js

import React from "react";

const styles = {
  "@global": {
    body: {
      color: "green"
    },
    a: {
      textDecoration: "underline"
    }
  }
};

export default function App() {
  return (
    <div style={styles} className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

like image 618
klequis Avatar asked Aug 31 '25 02:08

klequis


1 Answers

The documentation you point describes jss core api. You can look here on how to use it.

To use it in react-jss without dealing with jss instance you can use hooks or HOCs.

The example bellow uses hooks.

import React from "react";
import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  "@global": {
    body: {
      color: "green"
    },
    a: {
      textDecoration: "underline"
    }
  }
});

export default function App() {
  useStyles();

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

like image 162
Andrey Osiyuk Avatar answered Sep 02 '25 16:09

Andrey Osiyuk