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中內聯框的大小樣式

回答

相關問題