React中内联框的大小样式

有没有一种方法可以通过在React中内置框来设置框大小，而不是通过CSS包含它？是推荐的还是需要的，还是有其他选择？React中内联框的大小样式

这里是我的意思样本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";

来源

2017-04-20 foobar

我觉得这是你问...

是的，所有CSS属性都使用JavaScript中的驼峰大小写代替破折号，因此就像background-color变为backgroundColor，box-sizing变为boxSizing，你可以拨打：

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

好像你可能会问关于处理与反应，也，所以你可能想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

来源

2017-04-20 15:12:32

我意识到我提出的问题有点太模糊，但部分原因 - 我仍在寻找“正确”的方式来做事。我已经在使用React组件进行内联，并且我知道CSS和'react-css'语法之间的区别。我现在正在努力的事情是正确配置整体布局。这与我用CSS border-box得到的结果相同（请参阅上面的代码片段）。 document.body.style.boxSizing是朝着正确方向迈出的一步，但我仍然没有得到整个工作。 – foobar

所以你正在寻找'box-sizing：inherit'到页面上的所有东西？我想我会说，因为*选择器旨在针对一切，DOM范围内，我不知道通过JS开始应用它是有意义的...如果你只是想瞄准'根''，那么我会建议进一步查看CSS模块。您可以将范围化的CSS文件与您的组件关联起来，我相信它可以编写一个范围化的样式，例如：'.root *，.root *：before，.root *：{box-sizing：inherit; }'哪些CSSModules会为你转换成JS。 –

非常感谢Benjamin，我开始使用CSSModules，这应该可以做到。 – foobar

要添加内嵌样式https://facebook.github.io/react/docs/dom-elements.html#style 但CSS模块https://github.com/gajus/react-css-modules更适合的方法来风格反应的组分，因为风格是局部应用。

来源

2017-04-20 17:53:57

React中内联框的大小样式

回答

相关问题