如何使用辐射中一个组件中使用的常见CSS样式与另一个组件

Question

我有两个组件，它们使用具有不同内容的相同布局/样式。我在react.js中使用radium。我已经在其中一种组件中使用了在线样式，并希望将相同的样式用于其他组件。我是镭和反应的新手。帮我！

预先感谢。欢呼！

Answer 1

您只需要创建一个共享的外部样式文件，然后在需要它的每个组件中导入它。

// styles.js
export default {
  base: {
    background: 'red'
  }
}
// components
import sharedStyles from 'path/to/styles.js';
@Radium
class Button extends React.Component {
  render() {
    return (
      <button
        style={[
          sharedStyles.base
        ]}>
        {this.props.children}
      </button>
    );
  }
}