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

Question

我正在使用 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）

Answer 1

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

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

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