陣營和CSS模塊：如何風格組件而不承擔其內容

這個挑戰最好用一個小例子說明：陣營和CSS模塊：如何風格組件而不承擔其內容

import React from 'react' 
import styles from './styles.pcss' 

const Spinner =() => (
    <article className={styles.spinner}> 
    {/* <div> elements here*/} 
    </article> 
) 


export default Spinner

我想改變的微調器組件的位置，這必須是由微調的父母完成。我看到3個解決方案：

使用針對<article>標記（微調框的根元素）的CSS規則。我不喜歡這一點，因爲父母組件正在假設紡紗廠的內部結構。如果此標籤更改，則所有定位它的樣式都會打破。我必須能夠改變我的組件的內部結構，而不必擔心會破壞我的應用程序的許多區域。

將類名傳遞給微調組件。這是好得多，因爲沒有關於微調內部的假設。但是，由於潛在的每個組件都可以通過它們的父級（一個非常常見的CSS任務）來定位，那麼我就需要爲需要自定義樣式的每個組件實現傳遞的className（包括prop類型驗證等）。必須有更好的解決方案。

import React, { PropTypes } from 'react' 
import classNames from 'classnames' 
import styles from './styles.pcss' 

const Spinner = ({ className }) => (
    <article className={classNames(styles.spinner, className)}> 
    {/* <div> elements here*/} 
    </article> 
) 

Spinner.propTypes = { 
    className: PropTypes.string 
} 

export default Spinner

使用含<DIV>組件周圍我要的風格：

<div className="spinner"><Spinner /></div>

但是這會導致臃腫的標記不必要<div> S IN的情況下許多元素都必須風格（如設置他們的位置）。

您有哪些建議？

THX

來源

2016-12-15 Thibaut

我傾向於解決方案3.通過這種方式，樣式的組件（微調）保持清潔，並沒有實現額外的邏輯得到一個類名，驗證它，並與它自己合併它類。

我想看看第三方庫如何實現這種情況，他們也贊成解決方案3。這裏是related discussion關於造型<FormattedMessage>的react-intl。

此外，包裝<div>只能用於樣式容器本身（通常是位置），而不是組件的內容。如果許多組件必須定位，那麼它們很可能是子組件，例如：<TodoItemList>，在這種情況下，父組件會將className傳遞給它們，因爲它們不會存在於此特定上下文之外。

來源

2016-12-15 09:20:52 Thibaut

陣營和CSS模塊：如何風格組件而不承擔其內容

回答

相關問題