Question

我有一些简单的组件正在渲染，侧面有一些空隙。为了消除这些差距，我将体型添加到index.htm

中

<head>
<meta charset="utf-8">
<title>React Development</title>
<style> body { margin: 0; padding: 0; font-family: sans-serif; } </style>
</head>

这与我们在create-react-app中的默认示例类似。这是应用代码。

const Header = () => <div style={headerStyle}>Discover unlimited possibilities</div>;
class App extends React.Component {
 render() {
     return (
        <div>
            <Header/>
        </div>
     )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

有可能这样做吗？我看到一些人用普通的javascript风格，例如：

document.body.style.margin = "0px";

Answer 1

是的，它应该在样式标签中正常工作。您甚至可以创建App.css文件并将其导入App组件代码中，其中包含以下内容

body { margin: 0; padding: 0; font-family: sans-serif; }

Answer 2

您可以在componentDidMount生命周期方法中执行vanilla js来设置身体样式。

componentDidMount() {
    document.body.style.margin = "0px";
}

如何设置根节点外的元素

2 个答案: