css - React 和 CSS 模块 : how to style components without assuming their content

Question

这个挑战最好用一个小例子来说明:

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

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


export default Spinner

我想更改微调器组件的位置，所以这必须由微调器的父级来完成。我看到 3 个解决方案:

1. 使用针对 <article> 的 CSS 规则标签(微调器的根元素)。我不喜欢这样，因为父组件正在对微调器的内部结构做出假设。如果这个标签发生变化，那么所有以它为目标的样式都会被破坏。我必须能够更改我的组件的内部结构，而不必担心破坏我的应用程序的许多区域。

2. 向下传递一个类名到微调器组件。这要好得多，因为没有对微调器的内部结构做出任何假设。但是由于潜在的每个组件都可以由它们的父组件定位(一个非常常见的 CSS 任务)，我将不得不为每个需要自定义样式的组件实现传递的类名(包括 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
   

3. 在我要设置样式的组件周围使用包含

   的元素:

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

但这会导致带有不必要的 <div> 的臃肿标记在许多元素必须设置样式的情况下(比如设置它们的位置)。

你有什么建议？

谢谢

Answer 1

我倾向于解决方案 3。这样，样式化的组件(微调器)保持干净，并且不必实现额外的逻辑来获取类名、验证它并将它与自己的类合并。

我想看看第 3 方库是如何实现这种情况的，他们也支持解决方案 3。这是 related discussion关于 react-intl 的 样式.

此外，包装

只会在设置容器本身(通常是位置)的样式时使用，而不是组件的内容。如果必须定位许多组件，则它们很可能是子组件，例如:，在这种情况下， 父组件会将类名传递给它们，因为它们不会存在于此特定上下文之外。

关于css - React 和 CSS 模块 : how to style components without assuming their content，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41158887/