Как использовать @global с React-JSS

Я использую React-JSS и не понимаю, как использовать @global для создания глобальных стилей. В документе не указано (насколько я могу судить ) как глобальный стиль подключается к приложению React. Я создал пример приложения, в котором пытаюсь передать глобальные стили атрибуту style компонента верхнего уровня, но это не работает.

пример кода и ящика

Вот 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>
  );
}

reactjs jss
person klequis    schedule 09.01.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

В документации, которую вы указываете, описывается jss core api. Вы можете посмотреть здесь, как его использовать.

Чтобы использовать его в react-jss без работы с экземпляром jss, вы можете использовать хуки или HOC.

В приведенном ниже примере используются крючки.

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>
  );
}
person Andrey Osiyuk    schedule 09.01.2020
comment
Спасибо! Думаю, когда у меня был пример с использованием createUseStyles, я забыл вызвать useStyles (). - person klequis; 10.01.2020