React & CSS Modules: how to style components without assuming their content - css

Question

This challenge is best illustrated with a little example:
import React from 'react'
import styles from './styles.pcss'
const Spinner = () => (
<article className={styles.spinner}>
{/* <div> elements here*/}
</article>
)
export default Spinner
I'd like to change the position of the spinner component so this has to be done by the parent of the spinner. I see 3 solutions:
Use a CSS rule targeting the <article> tag (the root element of the spinner). I don't like this as the parent component is making assumptions about the internal structure of the spinner. If this tag changes, then all styles targeting it will break. I must be able to change the internal structure of my components without worrying about breaking many areas of my app.
Pass a className down to the spinner component. It's much better as no assumption is made regarding the internals of the spinner. But as potentially every component could be positioned by their parent (a very common CSS task), I would have then to implement the className being passed down (incl. prop types validation, etc) for every component that would need custom styling. There must be a better solution.
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
Use a containing <div> around the component I want to style:
<div className="spinner"><Spinner /></div>
But this leads to bloated markup with unnecessary <div>s in situations where many elements have to be styled (like setting their positions).
What are your recommendations?
Thx

Answer 1

I'm leaning towards solution 3. This way, the styled component (spinner) stays clean and doesn't have to implement additional logic for getting a className, validating it and merging it with its own classes.
I wanted to see how 3rd party libraries implemented this scenario, and they favor solution 3 as well. Here's the related discussion about styling <FormattedMessage> of react-intl.
Furthermore, the wrapping <div> would only be used when styling the container itself (typically, the position), not the contents of the component. And if many components have to be positionned, it's very likely that they are subcomponents, ex: <TodoItemList> and in this case the <TodoList> parent component would pass down the className to them as they won't exist outside this particular context.