如何为 React 组件设置默认样式

Question

React 组件很棒，因为它让我们可以定义自己的标签，它可以比原始标签更强大。

目前我只使用 React 组件来定义 HTML 结构，并设置每个标签的 className 来让样式表修改其外观。有没有办法在不使用内联 CSS 的情况下为组件提供默认样式？

我的一个想法是添加一个与一个组件关联的 CSS 文件，或者直接在 jsx 文件中为每个组件添加一个标签，然后编译 CSS 或 jsx 将所有 CSS 放在一个文件中并部分添加。

Answer 1

在 React 中使用内联样式方法很容易表达：

var compStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  margin: 5
};

React.render(<div style={compStyle}>Component</div>, mountNode);