在 React 中内联 box-sizing 样式

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 添加它。如果你真的不得不并且不想使用 CSS 模块，我相信你可以这样做：

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

也就是说，这不适用于像 :before 和 :after 这样的伪元素，因为它们实际上不是 DOM 的一部分：

Answer 2

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

在 React 中内联 box-sizing 样式

Inlining box-sizing style in React

css

styling

reactjs

box-sizing