JSX css內聯樣式

我正在使用React，我需要能夠採取一個css對象文字並將其轉換爲字符串。 React會自動爲添加到樣式標籤的樣式對象執行此操作。 React或其他庫中是否有函數可用於將對象文字轉換爲css字符串？JSX css內聯樣式

例如，我需要一個文字，看起來像：

{ 
    fontSize: '4em', 
    zIndex: 2, 
    marginLeft: '-.5em' 
}

，並將其轉換爲CSS串：

"font-size: 4em; z-index: 2, margin-left: -.5em"

什麼是用於該工作的最佳工具？

來源

2016-07-22 Tabbyofjudah

我相信這是你在找什麼： https://www.npmjs.com/package/apeman-react-style

您可以選擇是否將其作爲字符串返回文本或樣式對象數據。

希望有幫助！

來源

2016-07-22 19:00:54

其實我正在尋找一個功能，而不是一個反應組件。我想通過函數將樣式對象轉換爲字符串。 – Tabbyofjudah

這裏是爲瀏覽器的死簡單的ES5轉換例程：

function o2s(o){ 
    var elm=new Option; 
    Object.keys(o).forEach(function(a){elm.style[a]=o[a];}); 
    return elm.getAttribute("style"); 
} 

// test/usage: 
o2s({ 
    fontSize: '4em', 
    zIndex: 2, 
    marginLeft: '-.5em' 
}); 

// == "font-size: 4em; z-index: 2; margin-left: -0.5em;"

這種方法也自我驗證的CSS規則和任何已知的供應商前綴和非標準性的工作。

來源

2016-07-22 19:03:31 dandavis

JSX css內聯樣式

回答

相關問題