在React中插入盒子大小的样式

Question

是否有一种方法可以通过将其插入react中，而不是通过CSS包含它来设置盒子大小？是推荐的还是需要的，还是有其他选择？

这是我的意思的示例CSS片段：

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}
html {
   box-sizing: border-box;
}
*, *:before, *:after {
   box-sizing: inherit;
}

通过插入我的意思是这样：

document.body.style.backgroundColor = "red";

Answer 1

我认为这是您要问的...

是的，所有CSS属性都在JavaScript中使用骆驼库代替破折号，因此就像background-color变为backgroundColor一样，box-sizing变为boxSizing，您可以致电：

document.body.style.boxSizing = 'inherit';

似乎您可能还会询问使用React处理CSS的最佳方法，因此您可能需要检查一下：https：//github.com/css-modules/css-modules

编辑：真的，我建议您不要在任何情况下使用 *，但是如果您不打算将其应用于组件的范围，则您希望将其应用于整页通过JS添加它。如果您真的必须这样做，并且不想使用CSSMODULES，我相信您可以做类似的事情：

var allElements = [].slice.call(document.querySelectorAll('*'));
allElements.map(function(element) {
  element.style.boxSizing = 'inherit';
});

也就是说，这不适用于:before和:after之类的伪元素，因为它们实际上并不是DOM的一部分：https：//stackoverflow.com/a/5041526/1667063/1667063

Answer 2

添加内联样式https://facebook.github.io/react/docs/dom-elements.html#style但是CSS模块https://github.com/gajus/reeact-css-modules是样式组件的更合适的方法，因为该样式是在本地应用的。