1

有没有办法通过在 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";
4

2 回答 2

1

我想这就是你要问的...

是的，所有 CSS 属性在 JavaScript 中都使用驼峰式大小写来代替破折号，所以就像 become 、 become 一样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';
});

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

于 2017-04-20T15:12:32.640 回答
0

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

于 2017-04-20T17:53:57.940 回答