Question

有没有办法通过在React中内联来设置box-sizing，而不是通过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中的camel-case代替短划线，因此就像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

Answer 2

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

在React中内联框大小调整样式

2 个答案: