[英]How can I add style to the body element with JSS?
I'm building an application using react-jss to style my components and wanted to know if it is possible to add styles to top-level elements (like html
or body
). 我正在构建一个使用react-jss设置组件样式的应用程序,并想知道是否可以向顶级元素(例如html
或body
)添加样式。
To illustrate, I have this simple NotFound component that I'm styling with react-jss. 为了说明,我有一个使用React-jss样式的简单NotFound组件。 The style works fine, but the problem is the body
elements has a default margin that I wanted to remove. 样式工作正常,但问题是body
元素具有我要删除的默认边距。
NotFound.js 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);
Does anyone know if its possible to remove this margin using css-in-js? 有谁知道是否有可能使用css-in-js删除此空白? (I wanted to avoid css) (我想避免CSS)
You can use the syntax introduced by jss-plugin-global 您可以使用jss-plugin-global引入的语法
'@global': {
body: {...}
}
Also recommend creating a separate component for this and wrap your component with it. 还建议为此创建一个单独的组件,并用它包装您的组件。 Otherwise your specific component becomes less reusable. 否则,您的特定组件将变得难以重用。
Just to elaborate Oleg's response, that's what I did: 只是为了详细说明Oleg的回应,这就是我所做的:
1.Create my own JssProvider. 1.创建自己的JssProvider。 Note: Had to also add jss-plugin-camel-case
otherwise it wouldn't parse my properties from camelCase
to lisp-case
: 注意:还必须添加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.Added my global property to my top level component 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);
And that was it! 就是这样! Worked like a charm. 像魅力一样工作。
EDIT: After some more research I found that I don't need step 1. Just adding the @global
style to my App
component did the job. 编辑:经过更多研究后,我发现我不需要步骤1。只需将@global
样式添加到我的App
组件即可。 I guess this jss-global
plugin must be default in react-jss
. 我猜这个jss-global
插件必须是react-jss
默认值。 (someone correct me if I'm wrong) (如果我错了,请纠正我)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.