如何使用 JSS 为 body 元素添加样式？答案

【问题标题】：How can I add style to the body element with JSS?如何使用 JSS 为 body 元素添加样式？
【发布时间】：2019-01-15 14:57:44
【问题描述】：

我正在使用 react-jss 构建一个应用程序来设置我的组件的样式，并且想知道是否可以将样式添加到顶级元素（例如 html 或 body）。

为了说明，我有一个简单的 NotFound 组件，我正在使用 react-jss 进行样式设置。样式工作正常，但问题是 body 元素有一个我想删除的默认边距。

NotFound.js

import React from 'react';
import injectSheet from 'react-jss';

const styles = {
    notFound: {
        fontFamily: 'Roboto',
        backgroundColor: 'blue',
        color: 'white'
    }
}

function NotFound({ classes }) {
  return (
    <div className={classes.notFound}>
      NOT FOUND
    </div>
  )
}

export default injectSheet(styles)(NotFound);

有谁知道是否可以使用 css-in-js 删除此边距？（我想避免使用 CSS）

【问题讨论】：

我宁愿建议你创建一个名为global.css 的文件并将你所有的全局样式放在那里。稍后只需在您的 index.js 中使用它即可。无需向您的项目添加另一个依赖项，只需将样式添加到 body 元素。但这取决于你。
是否有理由必须以这种方式使用injectSheet？我无法将其导出为非默认导出。

标签： javascript css reactjs jss css-in-js

【解决方案1】：

可以使用jss-plugin-global引入的语法

  '@global': {
    body: {...}
  }

还建议为此创建一个单独的组件并用它包装您的组件。否则，您的特定组件的可重用性会降低。

【讨论】：

【解决方案2】：

只是为了详细说明 Oleg 的回应，我就是这样做的：

1.创建我自己的 JssProvider。 注意：还必须添加jss-plugin-camel-case，否则它不会将我的属性从camelCase 解析为lisp-case：

import App from './App';
import { create } from 'jss';
import { JssProvider } from 'react-jss';
import globalPlugin from 'jss-global';
import camelCase from 'jss-plugin-camel-case';

const jss = create();
jss.use(globalPlugin(), camelCase());

render(
    <JssProvider jss={jss}>
        <Router>
            <App />
        </Router>
    </JssProvider>
    document.getElementById("app")
);

2.将我的全局属性添加到我的顶级组件中

import React from "react";

import Main from "./common/ui/components/Main";
import NotFound from "./components/NotFound";
import injectSheet from 'react-jss';

const style = {
    '@global': {
        body: {
            margin: 0
        }
    }
};

const App = () => {
    return (
        <Main>
            <Switch>
                <Route component={NotFound}/>
            </Switch>
        </Main>
    );
};

export default injectSheet(style)(App);

就是这样！像魅力一样工作。

编辑：经过更多研究，我发现我不需要第 1 步。只需将 @global 样式添加到我的 App 组件就可以了。我猜这个jss-global 插件必须是react-jss 中的默认插件。（如果我错了，有人纠正我）

【讨论】：