如何将 Radium 中一个组件中使用的常用 CSS 样式用于其他组件？答案

【问题标题】：How to use common CSS styles used in one component in Radium to other component?如何将 Radium 中一个组件中使用的常用 CSS 样式用于其他组件？
【发布时间】：2017-03-07 10:57:59
【问题描述】：

我有两个组件，它们使用相同的布局/样式和不同的内容。我在 React.js 中使用镭。我在其中一个组件中使用了内联样式，并希望对其他组件使用相同的样式。我是 Radium 和 React 的新手。帮帮我！

提前致谢。干杯！！

【问题讨论】：

您不能将包含您的样式的变量作为道具传递给其他组件吗？
你在使用 webpack 吗？
给我们一些你的代码。
是的，我正在使用 webpack

标签： javascript html css reactjs radium

【解决方案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>
    );
  }
}

【讨论】：