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

【问题标题】：How to use '@global' with React-JSS如何在 React-JSS 中使用“@global”
【发布时间】：2020-04-27 10:28:35
【问题描述】：

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

【问题讨论】：

标签： reactjs jss

【解决方案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>
  );
}

【讨论】：

谢谢！我想当我有一个使用 createUseStyles 的示例时，我忘了调用 useStyles()。