如何在 React-JSS 中使用“@global”

Question

我正在使用 React-JSS，但不了解如何使用“@global”创建全局样式。 The doc 没有说明（据我所知）全局样式如何 feed/hooked 进入 React 应用程序。我创建了一个示例应用程序，我尝试将全局样式提供给顶级组件的 'style' 属性，但这不起作用。

codesandbox example

这里是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>
  );
}

Answer 1

您指向的文档描述了 jss 核心 api。你可以看看here如何使用它。

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

如何在 React-JSS 中使用“@global”

How to use '@global' with React-JSS

reactjs

jss