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的膨胀标记.

你有什么建议？

谢谢