React 中的内联 box-sizing 样式答案

【问题标题】：Inlining box-sizing style in ReactReact 中的内联 box-sizing 样式
【发布时间】：2017-04-20 15:07:53
【问题描述】：

有没有办法通过在 React 中内联来设置 box-sizing，而不是通过 CSS 包含它？是推荐的，还是需要的，还是有替代方案？

这是我的意思的示例 CSS sn-p：

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";

【问题讨论】：

标签： css reactjs styling box-sizing

【解决方案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

【讨论】：

我意识到我的问题有点过于含糊，但部分是故意的——我仍在寻找“正确”的做事方式。我已经在使用 React 组件进行内联，并且我知道 CSS 和“react-css”语法之间的区别。我现在正在努力解决的问题是正确配置整体布局。这与使用 CSS 边框框得到的结果相同（请参阅上面的代码 sn-p）。 document.body.style.boxSizing 是朝着正确方向迈出的一步，但我仍然没有让整个事情发挥作用。
所以您希望将“box-sizing:inherit”应用于页面上的所有内容？我想我会说，因为 * 选择器旨在针对 DOM 范围内的所有内容，我不确定通过 JS 应用它是否有意义...如果您只是想针对 ' root'，那么我建议您进一步查看 CSS Modules。您可以将一个作用域 CSS 文件与您的组件相关联，我相信编写一个作用域样式是可行的，例如：.root *, .root *:before, .root *:after { box-sizing: inherit; } CSSModules 会为您转换成 JS。
非常感谢本杰明，我开始使用 CSSModules，这应该可以解决问题。

【解决方案2】：

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

【讨论】：