如何通过JSS向主体元素添加样式?

时间:2019-01-15 14:57:45

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

我正在使用react-jss构建应用程序以对组件进行样式设置,并想知道是否可以向顶级元素(例如htmlbody)添加样式。

为了说明,我有一个使用React-jss样式的简单NotFound组件。样式效果很好,但是问题是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);

enter image description here

有人知道是否有可能使用css-in-js消除此空白吗? (我想避免使用CSS)

2 个答案:

答案 0 :(得分:2)

您可以使用jss-plugin-global

引入的语法
  '@global': {
    body: {...}
  }

还建议为此创建一个单独的组件,并用它包装您的组件。否则,您的特定组件将变得难以重用。

答案 1 :(得分:0)

仅是为了阐述奥列格的回应,这就是我所做的:

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中的默认插件。 (如果我错了,请纠正我)