如何将“@global”与 React-JSS 一起使用

Question

我正在使用 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>
  );
}

Answer 1

您指向的文档描述了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>
  );
}