我知道你可以在React類中指定樣式，如下所示：var MyDiv = React.createClass({ render: function() { var style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; }});我是否應該以這種方式做所有樣式，并且我的CSS文件中沒有指定任何樣式？或者我應該完全避免使用內聯樣式？做兩件事似乎很奇怪和混亂 - 在調整樣式時需要檢查兩個地方。
3 回答
拉風的咖菲貓
TA貢獻1995條經驗 獲得超2個贊
目前還沒有很多“最佳實踐”。對于React組件，我們這些使用內聯樣式的人仍然在進行實驗。
有許多方法變化很大：React內聯樣式的lib比較圖表
全有或全無？
我們所謂的“風格”實際上包含了很多概念：
布局 - 元素/組件與其他元素的關系
外觀 - 元素/組件的特征
行為和狀態 - 元素/組件在給定狀態下的外觀
從狀態樣式開始
React已經在管理組件的狀態，這使得狀態和行為的樣式自然適合與組件邏輯進行共置。
不要使用條件狀態類構建要呈現的組件，而是考慮直接添加狀態樣式：
// Typical component with state-classes
<li
className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />
// Using inline-styles for state
<li className='todo-list__item'
style={(item.complete) ? styles.complete : {}} />
請注意，我們使用類來設置外觀樣式，但不再使用任何帶.is-前綴的類來處理狀態和行為。
我們可以使用Object.assign（ES6）或_.extend（下劃線/ lodash）來添加對多個狀態的支持：
// Supporting multiple-states with inline-styles
<li 'todo-list__item'
style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>
定制和可重用性
現在我們正在使用Object.assign它變得非常簡單，使我們的組件可以重復使用不同的樣式。如果我們想要覆蓋默認樣式，我們可以在帶有props的調用站點上這樣做，如下所示：<TodoItem dueStyle={ fontWeight: "bold" } />。像這樣實現：
<li 'todo-list__item'
style={Object.assign({},
item.due && styles.due,
item.due && this.props.dueStyles)}>
布局
就個人而言，我沒有看到內聯布局樣式的令人信服的理由。有很多很棒的CSS布局系統。我只想用一個。
也就是說，不要直接向組件添加布局樣式。使用布局組件包裝組件。這是一個例子。
// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
className="col-xs-12 col-sm-6 col-md-8"
firstName="Michael"
lastName="Chan" />
// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
<UserBadge
firstName="Michael"
lastName="Chan" />
</div>
對于布局支持，我經常嘗試將組件設計為100% width和height。
出現
這是“內聯式”辯論中最具爭議的領域。最終，它取決于您的設計組件以及使用JavaScript的團隊的舒適度。
有一件事是肯定的，你需要圖書館的協助。瀏覽器狀態（:hover，:focus）和媒體查詢在原始React中很痛苦。
我喜歡Radium，因為這些硬件的語法設計用于模擬SASS的語法。
代碼組織
通常，您會在模塊外部看到樣式對象。對于todo-list組件，它可能看起來像這樣：
var styles = {
root: {
display: "block"
},
item: {
color: "black"
complete: {
textDecoration: "line-through"
},
due: {
color: "red"
}
},
}
吸氣功能
在模板中添加一堆樣式邏輯可能會有點混亂（如上所示）。我喜歡創建getter函數來計算樣式：
React.createClass({
getStyles: function () {
return Object.assign(
{},
item.props.complete && styles.complete,
item.props.due && styles.due,
item.props.due && this.props.dueStyles
);
},
render: function () {
return <li style={this.getStyles()}>{this.props.item}</li>
}
});
進一步觀看
我在今年早些時候在React Europe上更詳細地討論了所有這些：內聯樣式以及何時最好'只使用CSS'。
我很樂意幫助您沿途創造新的發現:)打我 - > @chantastic
添加回答
舉報
0/150
提交
取消