React和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规则tag(微调器的根元素).我不喜欢这个,因为父组件正在对微调器的内部结构做出假设.如果此标记发生更改,则所有针对它的样式都将中断.我必须能够改变我的组件的内部结构,而不必担心我的应用程序的许多方面.
>将className向下传递给微调器组件.它更好,因为没有假设旋转器的内部.但是因为可能每个组件都可以通过它们的父(一个非常常见的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的膨胀标记.

你有什么建议？

谢谢

我倾向于解决方案3.这样,样式化组件(微调器)保持干净,不必为获取className,验证它并将其与自己的类合并而实现额外的逻辑.

我想看看第三方库如何实现这种情况,他们也赞成解决方案3.这是关于样式的related discussion< FormattedMessage> react-intl

此外,包裹< div>仅在为容器本身(通常是位置)设置样式时使用,而不是在组件的内容中使用.如果必须定位许多组件,则它们很可能是子组件,例如：< TodoItemList>在这种情况下,< TodoList>父组件会将className传递给它们,因为它们不会存在于此特定上下文之外.