reactjs - 如何在 React-JSS 中使用 '@global'

Question

我正在使用 React-JSS，但不了解如何使用“@global”来创建全局样式。 The doc没有说明(据我所知)全局样式是如何输入/挂接到 React 应用程序中的。我创建了一个示例应用程序，尝试将全局样式提供给顶级组件的“样式”属性，但这不起作用。

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 实例，您可以使用钩子(Hook)或 HOC。

下面的示例使用了钩子(Hook)。

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