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

【问题标题】：How to set the default style to a React Component如何将默认样式设置为 React 组件
【发布时间】：2015-06-26 17:59:04
【问题描述】：

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

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

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

【问题讨论】：

我认为这不是解决那个 atm 的明确解决方案。但是在一月份的 react conf 中，他们谈到了 React-Native 附带的新的“内联”样式方案。有了它，您可以创建包含样式的 javascript 对象。 StyleSheet.create({ 'myComponent' : { margin: 5, padding: 5 }}); 这使您可以将组件 CSS 分开，然后您可以将 css 添加到组件结构中。
这是内联样式吗？我认为最好让用户有权限通过样式表修改组件的样式。这将使我们能够构建具有漂亮 UI 和可扩展性的组件。
它的内联样式，但是你将它分隔在一个 .js 文件而不是 .css 中。这意味着它几乎与样式表具有相同的用途。用户只需要更改一个文件。这是我正在处理的一个 React-Native 项目的示例：jsfiddle.net/0aqgxr5v PS：它也适用于 React。

标签： javascript css reactjs

【解决方案1】：

在 React 中用inline style 方法很容易表达：

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

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

【讨论】：

不，最好不要使用内联样式，因为我希望其他人能够通过 css 修改样式。
考虑A写了一个UI漂亮的组件，B想用这个组件，B想通过css改变部分样式，但是如果A用了内联css就没有了B 有机会通过 css 修改它。
这与原问题无关，但是很容易通过 props 将新样式对象传递给组件并将它们与默认样式合并。因此，您可以使用“内联方法”修改默认样式。