Javascript 如何使用JSS向body元素添加样式？

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

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

从“React”导入React；
从“react jss”导入表单；
常量样式={
未找到：{
fontFamily:“机器人”，
背景颜色：“蓝色”，
颜色：“白色”
}
}
函数NotFound（{classes}）{
返回(
找不到
)
}
导出默认图纸（样式）（未找到）；

---

有人知道在js中使用css是否可以删除此边距吗？（我想避免使用css）

您可以使用jss全球插件引入的语法

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

---

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

为了详细说明Oleg的反应，我就是这么做的：

1.创建我自己的JssProvider注意：还必须添加

jss插件camelCase

，否则它无法将我的属性从

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

从“/App”导入应用程序；
从“jss”导入{create}；
从'react jss'导入{JssProvider}；
从“jss global”导入globalPlugin；
从“jss插件camelCase”导入camelCase；
const jss=create（）；
use（globalPlugin（），camelCase（））；
渲染(
document.getElementById（“应用程序”）
);

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

从“React”导入React；
从“/common/ui/components/Main”导入Main；
从“/components/NotFound”导入NotFound；
从“react jss”导入表单；
常量样式={
“@global”：{
正文：{
保证金：0
}
}
};
常量应用=（）=>{
返回(
);
};
导出默认图纸（样式）（应用程序）；

就这样！工作得很有魅力

---

编辑：经过进一步研究，我发现我不需要第1步。只需将

@global

样式添加到我的

App

组件中，就完成了任务。我猜这个

jssglobal

插件必须是

react jss

中的默认插件。（如果我错了，请有人纠正我）

我建议您创建一个名为

global.css的文件，并将所有全局样式放在那里。以后只需要在index.js中使用它就可以了。无需向项目中添加其他依赖项，只需向body元素添加样式即可。但这取决于你。