Radium inline CSS - 构建导出类？

Question

是否可以将所有内联 Radium 样式提取到类以便 html 不会因所有内联样式而变得丑陋？

我有这个：

@Radium
class ExtendedComponent extends Component {
  render() {
    return (
      <div style={[styles.color, styles.box]}</div>
    );
  }
}

const styles = {
  color: {
    color: green
  },

  box: {
    borderColor: red,
    height: '20px',
    width: '20px'
  }
};

现在输出 HTML 看起来像这样：

<div style="color: green; border-color: red; height: 20px; width: 20px;"></div>

我希望它是这样的：

<div class="c1"></div>

CSS 规则将包括以下内容：

.c1 {
  color: green;
  border-color: red;
  height: 20px;
  width: 20px;
}

Answer 1

我不知道。就其本质而言，Radium 用于动态计算和应用 'inline' 样式，并通过在 JS 中捆绑样式来利用 React 组件 'Module'。

React 风格 从下面 link 中的列表来看，这似乎可以满足您的需求。请参阅 'Extracting styles into CSS at build time' - https://github.com/js-next/react-style#extracting-styles-into-css-at-build-time

部分

替代库 这是一些替代方案的 link，可以满足您的需求：https://github.com/FormidableLabs/radium/tree/master/docs/comparison.

Radium inline CSS - 构建导出类？

Radium inline CSS - on build export classes?

html

javascript

css

reactjs

radium

Radium inline CSS - 构建导出 类？

Radium inline CSS - on build export classes?

html

javascript

css

reactjs

radium

Radium inline CSS - 构建导出类？