React 中的内联样式

引言

在很少需要单页应用程序的前端项目中，DOM 元素的内联样式通常放在目标元素的 style="property: value" 属性中。

但在 React 中，关于内联样式，情况却大不相同。本指南重点介绍如何使用创建用户配置文件卡组件的真实示例来实现这一点。

在 React 中设置组件样式

您可能已经知道使用 classname 属性结合外部样式表来设置 React 组件的常规方法

jsx

CSS

内联样式

使用内联样式获得相同结果的方式有很大不同。要在 React 中使用内联样式，请使用 style 属性，该属性接受一个带有驼峰式属性的 JavaScript 对象。 例子

请注意，padding 值没有单位，因为 React 会在某些数字内联样式属性中添加 'px' 后缀。 在需要使用其他单位（例如 'em' 或 'rem'）的情况下，请明确使用字符串形式的值指定单位。 将其应用于 padding 属性应为 padding: '1.5em'。

此外，这些样式不会自动添加供应商前缀，因此您必须手动添加供应商前缀。

提高可读性

如果样式过多且所有内容都变得混乱，则 MyComponent 的可读性会急剧下降。 如下所示，由于样式只是对象，因此可以将其从组件中删除。

jsx

构建卡片组件

让我们构建用户卡组件。

经验法则

官方 React 文档不推荐使用内联样式作为设置项目样式的主要方式，而是建议使用 className 属性。

注意 文档中的某些示例为了方便起见使用样式，但通常不建议将 style 属性用作设置元素的主要方式。

在大多数情况下，class names 应该引用在外部 CSS 样式表中定义的类。 样式通常在 React 应用程序中使用，以在渲染时添加动态计算的样式。