javascript - 如何使用 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: {...}
  }

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